向图片库添加箭头 - JS

Question

我对 JavaScript 和 Whosebug 相当陌生，我只是想向图片库添加可点击的按钮。

我目前对 JavaScript 的下一步有点迷茫，任何关于如何循环浏览图像的提示都会很棒。

干杯

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

这里有一个 fiddle 的解决方案：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。

如有问题请告诉我。

向图片库添加箭头 - JS

Adding arrows to image gallery - JS

html

javascript

image

gallery