你如何遍历数组以显示带有 setInterval ES5

如何解决你如何遍历数组以显示带有 setInterval ES5

因此，我创建了一个 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

解决方法

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

首先，我将您的图像放入一个数组中：

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

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