jQuery循环运行多个旋转器的序列

我试图在一个以顺序方式运行但没有同步转换的页面上有3个旋转器。

我编写了下面的代码，以为我可以设置一个间隔函数来每秒运行一次，保持计算它的访问次数，并将结果模数加十来得到我的动作点。

然而，这并没有按预期工作。 ＃rotate2按预期启动，然后＃rotate3，但然后返回＃rotate2。 事情变得非常糟糕，幻灯片一起消失，等等。

我还尝试将模数提高到30并将操作点设置为9,18和27.当我这样做时，＃rotate2实际运行第二次，然后控制台返回到9.这就好像超时选项没有被尊重。 有什么建议？

JS Fiddle Link： http ： //jsfiddle.net/6yGET/2/

jQuery(function ($) { $(document).ready(function(){ $('#rotate1, #rotate2, #rotate3').cycle({ timeout: 0, speed: 'fast' }); var count = 0; setInterval( function(){ count++; console.log(count % 10); switch(count % 10){ case 3: // rotator 2 change $('#rotate2').cycle('next'); break; case 6: // rotator 3 change $('#rotate3').cycle('next'); break; case 9: // rotator 1 change $('#rotate1').cycle('next'); break; } }, 1000 // interval every second ); }); }); 

Answer 1

它没有那么多，它忽略了你的超时，但似乎调用“下一个”开始循环以获得下一个。 然而，它的行为非常奇怪。 我怀疑可能是因为它不是像这样手动分页而设计的。

我找到了一种方法来做你想做的事。 这是使用“延迟”属性并分别初始化每个周期，并在其第一页上有适当的延迟。

  $('#rotate2').cycle({ timeout: 10000, speed: 'fast', delay: 3000-10000 }); $('#rotate3').cycle({ timeout: 10000, speed: 'fast', delay: 6000-10000 }); $('#rotate1').cycle({ timeout: 10000, speed: 'fast', delay: 9000-10000 }); 

这个小提琴演示： http ： //jsfiddle.net/6yGET/4/

每个延迟的-10000的原因是因为否则第一次转换似乎发生在延迟+超时秒之后。