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

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>