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文档的events部分：

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

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

在每个内部，尝试添加事件：

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