如何循环遍历数组以使用 setInterval ES5 显示图像

Question

因此，我创建了一个 Carousel 来循环使用 setInterval 为 3000 的图像。我使用 if 语句对这些图像进行了硬编码，以更新图像下方的图标（我将在 2 个链接中放入屏幕截图。）

我正在尝试弄清楚如何使用循环对其进行编码以更新我的图像元素的 src 属性。

变量：

var $rightArrow = document.querySelector('#right-arrow-icon');
var $leftArrow = document.querySelector('#left-arrow-icon');
var $img = document.querySelector('#image-source');
var $circleOne = document.querySelector('#circle-one');
var $circleTwo = document.querySelector('#circle-two');
var $circleThree = document.querySelector('#circle-three');
var $circleFour = document.querySelector('#circle-four');
var $circleFive = document.querySelector('#circle-five');

我当前的代码来完成我希望能够遍历数组的工作：

var intervalID = setInterval(rightClick, 3000);

$rightArrow.addEventListener('click', rightClick);

function rightClick(event) {
  if ($img.getAttribute('src') === 'images/001.png') {
    $img.setAttribute('src', 'images/004.png');
    $circleOne.setAttribute('class', 'far fa-circle');
    $circleTwo.setAttribute('class', 'fas fa-circle');
  } else if ($img.getAttribute('src') === 'images/004.png') {
    $img.setAttribute('src', 'images/007.png');
    $circleTwo.setAttribute('class', 'far fa-circle');
    $circleThree.setAttribute('class', 'fas fa-circle');
  } else if ($img.getAttribute('src') === 'images/007.png') {
    $img.setAttribute('src', 'images/025.png');
    $circleThree.setAttribute('class', 'far fa-circle');
    $circleFour.setAttribute('class', 'fas fa-circle');
  } else if ($img.getAttribute('src') === 'images/025.png') {
    $img.setAttribute('src', 'images/039.png');
    $circleFour.setAttribute('class', 'far fa-circle');
    $circleFive.setAttribute('class', 'fas fa-circle');
  } else if ($img.getAttribute('src') === 'images/039.png') {
    $img.setAttribute('src', 'images/001.png');
    $circleFive.setAttribute('class', 'far fa-circle');
    $circleOne.setAttribute('class', 'fas fa-circle');
  }
  clearInterval(intervalID);
  intervalID = setInterval(rightClick, 3000);
}

图片：https://imgur.com/a/NcRrNdE

Answer 1

在哪里可以看到循环机会的最大线索是代码的重复。如果您发现自己编写了类似的模式，那么它很可能会被重构为更简洁的代码。这是我的解决方案：

首先我把你的图片放到一个数组中：

const imgArray = [ 'images/001.png','images/004.png', 'images/007.png', 'images/025.png','images/039.png' ]

不是每次都用getAttribute获取图像字符串，而是利用函数的输入变量使其动态化：

function rightClick(currentImg) {

    const currentImgIndex = imgArray.indexOf(currentImg)

    let nextImgIndex

    //Circle back to 0 if the current index is the last
    if (currentImgIndex == imgArray.length - 1) {
        nextImgIndex = 0
    } else {
        nextImgIndex = currentImgIndex + 1
    }

    // You can make this even cleaner by using ternary operator
    // let nextImgIndex = currentImgIndex == imgArray.length - 1 ? 0 : currentImgIndex + 1 

    $img.setAttribute('src', imgArray[nextImgIndex]);

    // We set up the id for the circles as "circles-1", "circles-2" etc..
    // so that we can make use of the index to make it dynamic

    let $currentCircle = document.querySelector(`#circle-${currentImgIndex + 1}`)
    let $nextCircle = document.querySelector(`#circle-${nextImgIndex + 1}`)
 
    // use classList to remove and add only the necessary class
    $currentCircle.classList.remove('fas')
    $currentCircle.classList.add('far')

    $nextCircle.classList.remove('far')
    $nextCircle.classList.add('fas')

}

最后，使用 setInterval 像这样调用它：

setInterval(() => {
    let currentImg = $img.getAttribute('src')
    rightClick(currentImg)
}, 3000);

我在这里用 CodePen 测试过： https://codepen.io/isaacyong/pen/GRNzbzG

如果这对您有帮助，请告诉我，如果您还有其他问题，请随时提问！