如何让 div 一次显示一个，设置为一次

Question

我一直在使用 setInterval 和 setTimeout 来显示一个 div，然后再继续显示第二个 div，然后显示第三个（最终）。在最终的 div 显示后，我想循环回到第一个 div 以再次开始切换 div 的过程。

setInterval(function(){ 
  $(".one").toggle(); 
  $(".two").toggle();

}, 5000);

所以我发现这个循环运行得非常好，但是当我引入“.third” div 时，它会跳过第二个，我非常困惑！

Answer 1

为它们提供相同的类，并使用每次递增的计数器变量来知道要显示哪一个。到达最后一个 div 时使用模数环绕。

var counter = 0;
setInterval(function() {
  $(".class").hide();
  $(".class").eq(counter).show();
  counter = (counter + 1) % $(".class").length;
}, 2000);

.class {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class">
  Div 1
</div>
<div class="class">
  Div 2
</div>
<div class="class">
  Div 3
</div>
<div class="class">
  Div 4
</div>

Answer 2

您需要遍历您的 div，否则您只是每 5000 毫秒切换一次所有 div，这似乎只适用于两个 div，但不适用于更多

伪代码：

var divs = [$(".one"),$(".two"),$(".three")]
var index = 0
function focusNextDiv(){
  //hide all divs
  //select divs[index] and toggle it
  //increment index by 1
  //check if index is bigger than divs.length if so reset index to 0
}
setInterval(function(){ 
  focusNextDiv()
}, 5000);