javascript – 根据时间间隔显示和隐藏

我想根据时间间隔显示和隐藏一系列div.

4秒后显示div 1,再过4秒后显示div 2,依此类推.

之前的div被隐藏,因此看起来好像新信息正在替换先前和时间间隔.

我有一点工作,就在我添加更多div时.

setInterval(function() {
  $("#a").hide();
  setTimeout(function() {
    $("#b").fadeIn('normal');
  });
}, 4000);

#b, #c {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a">1</div>
<div id="b">2</div>
<div id="c">3</div>

https://jsfiddle.net/Layt8cuy/1/

默认情况下,第一个div需要在那里,并且它们在最后一个div处停止,没有循环返回到开头.

解决方法:

这是基本功能Jsfiddle

var currentDiv = $("#a");
var nextDiv, count = 1;
var myInterval = setInterval(function() {
  if (count == 5) {
    clearInterval(myInterval);
  } else {
    count++;
    currentDiv.hide();
    currentDiv = currentDiv.next();
    currentDiv.show();
  }
}, 2000);

#b,
#c,
#d,
#e {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a">1</div>
<div id="b">2</div>
<div id="c">3</div>
<div id="d">4</div>
<div id="e">5</div>