Question

我一直在玩setInterval和setTimeout来显示一个div，然后再继续显示第二个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，但不会再工作

伪代码：

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);

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

2 个答案: