Javascript Tıklayınca Resim Gösterme

yazilimyolcusu 301 gün önce

426 defa görüntülendi ve 1 kişi tarafından değerlendirildi

Merhabalar. Bir sorum var arkadaşlar. Aşağıda bir adet geniş, büyük bir resim var. Bu resmin aşağısında da dört küçük resim var. Aşağıdaki hangi resme tıklarsam o resim yukarıda görünecek. Aşağıdaki kodda "src" yi gösterebildim ama resmi gösteremedim.

<div id="yenieklenensliderbuyukresim">
    
</div>

<div class="yenieklenenslider">
    <div  value="" alt="">
        <img class="yenieklenenresim" src='images/yenieklenenresim/1.jpg' type="button" onclick="tikla()">
    </div>

    <div  value="" alt="">
        <img class="yenieklenenresim" src='images/yenieklenenresim/2.jpg' type="button" onclick="tikla()">
    </div>

    <div  value="" alt="">
        <img class="yenieklenenresim" src='images/yenieklenenresim/3.jpg' type="button" onclick="tikla()">
    </div>

    <div  value="" alt="">
        <img class="yenieklenenresim" src='images/yenieklenenresim/4.jpg' type="button" onclick="tikla()">
    </div>
</div>

function tikla() {
    var sliderekle = document.querySelectorAll(".yenieklenenresim");
    var slidergoster = document.getElementById("yenieklenensliderbuyukresim");

    for(var x=0; x<sliderekle.length; x++) {
        slidergoster.innerHTML = sliderekle[x].src;
    }
}

javascript

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (4)

mhmnm

270 gün önce

Bu kullanımı öneriyorum

const imgs = document.querySelectorAll('.yenieklenenresim');
const buyukResim = document.querySelector('#yenieklenensliderbuyukresim');

imgs.forEach((img, i) => {
    img.addEventListener('click', () => {
        const src = imgs[i].src;
        buyukResim.innerHTML = src
    })
})

#013249

yazilimyolcusu

279 gün önce

Şu şekilde hallettim. Resime aşağıdaki kodu verdim.

onclick="resimdegistir(this.src)"

Script sayfasına da aşağıdaki kodu verdim.

const resimdegistir = src => {
    document.getElementById('sliderbuyukresim').src = src;
}

#013230

devugur24

287 gün önce

js click event ile sadece css i degis. diplay none to display flex ya da herne istiyorsan

#013224

ebykdrms

299 gün önce

Şu örneği inceleyebilirsiniz: https://codepen.io/ebykdrms/pen/ZEPgxmo

<div id="yenieklenensliderbuyukresim"></div>

<div class="yenieklenenslider">
    <div><img class="yenieklenenresim" src='https://picsum.photos/400'></div>
    <div><img class="yenieklenenresim" src='https://picsum.photos/401'></div>
    <div><img class="yenieklenenresim" src='https://picsum.photos/402'></div>
    <div><img class="yenieklenenresim" src='https://picsum.photos/403'></div>
</div>

#yenieklenensliderbuyukresim { height:400px; width:400px; border:1px solid #ccc; margin:20px auto; }
#yenieklenensliderbuyukresim > img { width:100%; height:100%; object-fit:cover; }
.yenieklenenslider { display:flex; flex-direction:row; align-items:center; justify-content:center; }
.yenieklenenresim { width:100px; height:100px; object-fit:cover; cursor:pointer; }

const $bigImage = document.getElementById("yenieklenensliderbuyukresim");
const $images = document.querySelector(".yenieklenenresim");

document.addEventListener("click", function(e){
  const target = e.target.closest(".yenieklenenresim");
  if(!target) return;
  const src = target.getAttribute("src");
  $bigImage.innerHTML = target.outerHTML;
});

#013209