Javascript Tıklayınca Resim Gösterme
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;
}
}
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
})
})