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>