jquery在计时器上滚动显示元素

Question

这个标题可能有点误导人，我不知道从哪里开始，甚至不知道该搜索什么

我有一个页面，上面有10个div元素（比如div1、div2、div3等）

我希望能够有一个jquery函数以滚动的方式显示它们

例如开始显示div1、div2、div3、div4

10秒后，显示div2、div3、div4、div5

10秒后，显示div3、div4、div5、div6

...等循环

10秒后，显示div8、div9、div10、div1

有谁能提供一个解决方案或给我一个正确的方向，请

多谢加里

Answer 1

null

var cycle = function cycle() {
  var first = $("section div:eq(0)");
  $("div:lt(4)").css("display", "block");
  $("div:gt(3)").css("display", "none");
  var dfd = $.Deferred(function(d) {
    setTimeout(d.resolve, 10000)
  }).promise();
  dfd.then(function() {
    first.css("display", "none").appendTo(first.parent());
    cycle()
  })
}

cycle()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</section>