JS Image Slider For Loop在第二次迭代时未迭代

Question

伙计们，过去几天我一直在努力解决这个问题。我真的需要你的帮助，我想了解发生了什么。我的函数将迭代一次，然后返回到第一个值，我如何使它从零开始循环并保持循环。我试了几次循环，但都没有成功。谢谢你们！

function run() {
for (let i = 0; i <= imgArray.length; i++) {
(function (e) {
setTimeout(function () {
if (i == imgArray.length) {
i = 0;
}
imgContainer.style.background = imgArray[i];
}, 3000 * e);
})(i);
};
}

Answer 1

您可能想要的是setInterval。与只执行一次的setTimeout不同，setInterval每隔一段时间(例如每1秒(执行一次，直到调用clearInterval()。

使用这个和一些模(%(逻辑，我们可以做：

var currentImage = 0;
//this will call `changeBackground` every 1 second
setInterval(changeBackground, 1000); //1000 ms = 1 sec
function changeBackground() {
currentImage = (currentImage + 1) % imgArray.length;
imgContainer.style.background = imgArray[currentImage];
}

---

模部分的说明：

%或模给了我们imgArray.length除以currentImage + 1的欧几里得余数，该余数将始终是0和imgArray.length - 1之间的值。每当currentImage + 1等于imgArray.length时，currentImage被重置为零。