将箭头添加到图片库-JS

Question

对JavaScript和Stackoverflow来说新的合理的，我只是想将可点击的按钮添加到图片库。

对于JavaScript中的下一步，我目前有点失落，关于如何在图像中循环的任何提示都很棒。

干杯

https://jsfiddle.net/KrnRbts/zkvu16nv/

HTML：

"use strict"; 
(function() { 
var thumbnails = document.querySelectorAll('.gallery__img'), 
    imageMain = document.querySelector('.image-main'); 
var leftArrow = document.querySelector('.material-icons left-btn'), 
    rightArrow = document.querySelector('.material-icons right-btn'); 
var currentIndex = 0; 

for (var i = 0; i < thumbnails.length; i++) { 
    thumbnails[i].addEventListener('click', function(evt) { 
    imageMain.src = evt.target.src.replace('150/100', '1000/400'); 
}); 
} 

function arrows() { 
thumbnails.click(); 
} 

function moveLeft(leftArrow){ 
for (var j = 0; j < currentIndex.length; j--){ 
currentIndex--; 
} 
} 

function moveRight(rightArrow){ 
for (var j = 1; j < currentIndex.length; j++){ 
currentIndex++; 
} 
} 

})(); 

JS：

<div class="gallery__wrapper"> 
<div class="image-main__wrapper"> 
<img class="image-main" src="https://unsplash.it/g/1000/400?image=0"> 
    <div id="arrows"> 
     <i class='material-icons left-btn'>chevron_left</i> 
     <i class='material-icons right-btn'>chevron_right</i> 
    </div> 
    <div class="image-thumbnails__wrapper"> 
     <ul class="thumbnails"> 
     <li><img id="thumb-1" class="gallery__img" src="https://unsplash.it/g/150/100?image=1"></li> 
     <li><img id="thumb-2" class="gallery__img" src="https://unsplash.it/g/150/100?image=2"></li> 
     <li><img id="thumb-3" class="gallery__img" src="https://unsplash.it/g/150/100?image=3"></li> 
     <li><img id="thumb-4" class="gallery__img" src="https://unsplash.it/g/150/100?image=4"></li> 
     <li><img id="thumb-5" class="gallery__img" src="https://unsplash.it/g/150/100?image=5"></li> 
     <li><img id="thumb-6" class="gallery__img" src="https://unsplash.it/g/150/100?image=6"></li> 
     <li><img id="thumb-7" class="gallery__img" src="https://unsplash.it/g/150/100?image=7"></li> 
     <li><img id="thumb-8" class="gallery__img" src="https://unsplash.it/g/150/100?image=8"></li> 
     </ul> 
    </div> 
    </div> 
</div> 

Answer 1

这里与解决方案小提琴：https://jsfiddle.net/99x4a1da/

"use strict"; 
(function() { 
    var thumbnails = document.querySelectorAll('.gallery__img'), //target thumbnail images, 
     imageMain = document.querySelector('.image-main'); //target main image 
    var leftArrow = document.querySelector('.material-icons.left-btn'), 
     rightArrow = document.querySelector('.material-icons.right-btn'); 
    var currentIndex = 0; 

    for (var i = 0; i < thumbnails.length; i++) { 
     thumbnails[i].addEventListener('click', function(evt) { 
     imageMain.src = evt.target.src.replace('150/100', '1000/400'); 
     currentIndex = evt.target.id.substr(6, evt.target.id.length) - 1; 
    }); 
    } 
    leftArrow.addEventListener('click', function(evt) { 
    if (currentIndex > 0) { 
     currentIndex--; 
     imageMain.src = thumbnails[currentIndex].src.replace('150/100', '1000/400'); 
    } 
    }); 

    rightArrow.addEventListener('click', function(evt) { 
    if (currentIndex < thumbnails.length -1) { 
      currentIndex++; 
      imageMain.src = thumbnails[currentIndex].src.replace('150/100', '1000/400'); 
     } 
    }); 


})(); 

说明：您将一个点击监听器添加到两个箭头按钮。在页面的第一次加载时，索引将为0.因此，只需要跟踪索引，无论是单击箭头还是缩略图。 当然，您需要检查是否允许前一个或下一个或者如果您已经在最后一个元素。 为了检测哪个缩略图已经被点击来更新当前索引 - 不同的方法将是可能的。这里使用<img>标签的标识。

如果您有任何问题，请告诉我。