Question

  <style>
    #main div {
      display: none;
    }
  </style>

  <div id="main">
    <div>first</div>
    <div>second</div>
    <div>third</div>
  </div>

  <script>
    var divElems = [].slice.call(document.querySelectorAll('#main div')),
        main = document.querySelector('#main'), i = 0;


    setInterval(function f() {
      var item = divElems[i % divElems.length];
      item.style.display = 'block';
      i++;
    }, 3000);
  </script>

请告诉你如何在#main中显示队列而不停止？最初，它们是隐藏的。

元素第一，第二和第三应按顺序出现，每3秒

First shows a block
<div>first</div>
then instead
<div>second</div>
and then
<div>third</div>

Answer 1

我在评论后再次更新了我的答案。 Is this what you are looking for?

var divElems = [].slice.call(document.querySelectorAll('#main div')),
main = document.querySelector('#main'),
i = 0;

divElems[0].style.display = 'block';

setInterval(function f() {
    var item = divElems[i % divElems.length];
    item.style.display = 'none';
    i++;
    item = divElems[i % divElems.length];
    item.style.display = 'block';
}, 3000);

改变div时间

1 个答案: