jquery - jQuery Cycle2 同步多个幻灯片以一个接一个地运行

Question

我在一个页面上有 6 个 jQuery 循环，我希望第一个循环改变然后暂停，然后我希望第二个循环在几秒钟后改变并暂停，依此类推，直到最后一个循环然后它又回到开头.

我看到有人发布了一些东西，但它不适用于我的代码：

$('.cycle').each(function(){
   $(this).cycle({
      delay:   -8000 + (2000 * (i+1)),
      timeout:  8000
   });
});

我的代码是：

<div class="cycle">
   <img alt="" src="_assets/images/one.png">
   <img alt="" src="_assets/images/two.png">
   <img alt="" src="_assets/images/three.png">
</div>
<div class="cycle">
   <img alt="" src="_assets/images/two.png">
   <img alt="" src="_assets/images/three.png">
   <img alt="" src="_assets/images/one.png">
</div>
<div class="cycle">
   <img alt="" src="_assets/images/three.png">
   <img alt="" src="_assets/images/one.png">
   <img alt="" src="_assets/images/two.png">
</div>

Answer 1

查看 api 文档的事件部分：

http://jquery.malsup.com/cycle2/api/

看起来cycle-finished触发器就是您正在寻找的东西。

在 each 中，尝试添加事件：

$(this).cycle({
  delay:   -8000 + (2000 * (i+1)),
  timeout:  8000
}).on( 'cycle-finished', function( event, opts ) {
   ....
});