Question

我正在使用JavaScript构建图片库。

我将所有图像都放在一个名为“images”的文件夹中，并将它们放在一个数组中，这样我就可以循环它们了。

我有一个“下一个”按钮，其目的是显示下一个图像，以及一个“上一个”按钮，用于显示上一个图像。但是，它只有一半工作：当我点击下一步时，它只是向我显示数组中的第二个图像，不会通过其他图像，当我点击上一个时，它只显示一个空图像。 / p>

这是我的JS代码：

var images = ['images/1.jpg', 'images/2.jpg', 'images/3.jpg', 'images/4.jpg', 'images/5.jpg', 'images/6.jpg', 'images/7.jpg', 'images/8.jpg', 'images/9.jpg'];
var index = 0;
document.getElementById('imgsrc').src = images[index];

var next = document.getElementById('slider-next');
var previous = document.getElementById('slider-previous');
//NEXT BUTTON

next.addEventListener('click', nextImage);

function nextImage(){
    for(i = 0; i < 10; i++){
        document.getElementById('imgsrc').src = images[index + 1];
    }
}
//'Previous' button

previous.addEventListener('click', previousImage);

function previousImage(){
    for(i = 0; i < 10; i++){
        document.getElementById('imgsrc').src = images[index - 1];
    }
}

这是我的HTML：

 <section class="button">

  <button id="slider-previous"><i class="fa fa-backward" aria-hidden="true" class="icon"></i></button>

  <button id="slider-toggle"><i class="fa fa-play" aria-hidden="true" class="icon"></i></button>

  <button id="slider-next"><i class="fa fa-forward" aria-hidden="true" class="icon"></i></button>

  <button id="slider-random"><i class="fa fa-random" aria-hidden="true"></i></button>

</section>

<section class="gallery">

  <img id='imgsrc' src="">

</section>

我在这里做错了什么？

我感谢所有回复

Answer 1

我不确定你为什么要使用这些for循环。

无论如何，用这段代码替换这些函数。

function nextImage() {
    index+=1;
    if (index > images.length - 1) {
     index = 0;
    }

     document.getElementById('imgsrc').src = images[index];

}
//'Previous' button

previous.addEventListener('click', previousImage);

function previousImage(){
    index-=1;
    if (index < 0) {
     index = images.length - 1;
    }

     document.getElementById('imgsrc').src = images[index];

}

Answer 2

调用nextImage时需要增加索引，调用previousImage时需要递减。另外，我添加了if语句以防止超出数组边界。

function nextImage() {
  if(index < images.length - 1) {
    for (i = 0; i < 10; i++) {
      document.getElementById('imgsrc').src = images[index++];
    }
  }
}

function previousImage() {
  if(index > 0) {
    for (i = 0; i < 10; i++) {
      document.getElementById('imgsrc').src = images[index--];
    }
  }
}

Answer 3

//NEXT BUTTON

next.addEventListener('click', nextImage);

function nextImage(){
    if(index<images.length-1)
    {
        index++;
        document.getElementById('imgsrc').src = images[index];
    }

}
//'Previous' button

previous.addEventListener('click', previousImage);

function previousImage(){
    if(index>0)
    {
    index--;
    document.getElementById('imgsrc').src = images[index];
    }

}

Javascript图库：for循环下一个和上一个按钮无法正常工作

3 个答案: