Question

我正在使用JavaScript创建一个简单的图像幻灯片，但是当我遍历所有图像时，我无法重置循环：

var images = document.querySelectorAll(".slide-img");
var index = 0;
var time = 1000;

function reset(){
    for(var i = 0; i <= 3; i++){
        images[i].style.display = 'none';
        images[0].style.display = 'block';
    }   
}

reset();

var looper = setInterval(function(){ 
    index++;
    images[index].style.display = 'block';

    if(index == 3){
        index = 0;
        images[index].style.display = 'block';
        //or calling reset() again.
    }

}, 1000);

设置除第一个之外的所有图像display:none后，我尝试调用setInterval来循环我的所有图像，但是当索引为3时会出现问题。我正在调用reset()功能，它不工作？

Answer 1

您的代码存在一些问题。

if语句中的代码不会将所有图像重置为隐藏。所以你需要调用reset函数
您的重置功能不会重置索引。
你应该将索引0设置为阻塞一次，然后遍历其余部分，而不是在每次迭代中将索引0设置为阻塞。
因为您在index == 3时重置，所以您永远不会看到最后一张图片。您应该重置以下迭代，以确保每个图像都可见一秒钟。

请参阅下面的示例。

＆＃13;

var images = document.querySelectorAll(".slide-img");
var index = 0;
var time = 1000;

function reset(){
  index = 0;
  images[0].style.display = 'block';
  for(var i = 1; i < images.length; i++){
    images[i].style.display = 'none';
  }   
}

reset();

setInterval(function(){ 
  index++;
  if(index >= images.length){
    reset();
  } else {
	  images[index].style.display = 'block';
  }
}, 1000);

＆＃13;

.container {
  display: flex;
}

.slide-img {
  width: 100px;
  height: 100px;
}

＆＃13;

<div class="container">
  <div class="slide-img" style="background: red"></div>
  <div class="slide-img" style="background: blue"></div>
  <div class="slide-img" style="background: green"></div>
  <div class="slide-img" style="background: purple"></div>
</div>

＆＃13;

如果您对我的代码与您的代码有何不同有其他疑问，请在评论中提问。但我认为代码应该清晰易懂。

setInterval循环不起作用

1 个答案: