javascript - 如何在javascript中循环遍历图像数组

Question

我有一个包含三张图像的图像轮播。我有下一个和上一个按钮来单击图像数组，但我希望在单击数组中最后一个图像上的“下一个”时返回到第一个图像(当单击数组中最后一个图像上的“上一个”时返回到最后一个图像)第一张图片)。有没有办法使用循环来完成这项工作？

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
var currentImg = 0;

document.querySelector('.carousel>img').src = 'images/' + images[0];

document.querySelector('.carousel').addEventListener('click', function (evt){
var target = evt.target;
if (target.classList.contains('control')) {

    if (target.classList.contains('next')) {
    //move to the next index in the array 
        currentImg += 1;

    } else if (target.classList.contains('prev')){
    // move to the previous index in the array
        currentImg -= 1;
    } 
    // display the new current image
    document.querySelector('.carousel>img').src = 'images/'
        + images[currentImg];
    }
});

我能够执行以下操作，并且它完成了我想要的操作:

    if (target.classList.contains('next')) {
       if(currentImg==2){
           currentImg=0
      } else {
        currentImg += 1;
      }

    } else if (target.classList.contains('prev')){
       if(currentimg==0){
           currentimg=2
      } else { 
        currentImg -= 1;
    } 

感谢您提出的所有其他建议，我也会研究这些建议!

Answer 1

由于您想要双向(+ 和 -)，请考虑:

var fac = target.classList.contains('next')? 1 : -1;
currentImage = (currentImage + fac + images.length) % images.length;

因此，如果currentImage达到images.length，它就会换行到第一张图像，如果它达到-1，它就会“换行”到imaages.length - 1，即最后一张图像。