向图片库添加箭头- 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>标记的id。

如果你有问题，请告诉我。