jQuery Cycle多个旋转器的运行顺序 [英] jQuery Cycle running sequence of multiple rotators

问题描述

我正在尝试在页面上设置3个旋转器，这些旋转器以顺序方式运行，但没有同步的过渡.

I am attempting to have 3 rotators on a page that run in a sequenced fashion but without synced transitions.

我写了下面的代码，以为我可以设置一个间隔函数以每秒运行一次，对访问次数进行计数，并将结果乘以10以得到我的动作点.

I wrote the below code, thinking I could set an interval function to run every second, keep a count of the times it is accessed, and modulus the result by ten to get my action points.

但是，它没有按预期方式工作. #rotate2按预期启动，然后#rotate3，但随后又回到#rotate2.事情真的一发不可收拾，幻灯片一起消失了，等等.

This however is not working as expected. #rotate2 starts as expected, then #rotate3, but then it goes back to #rotate2. Following things get really out of whack, slides disappear all together, etc.

我还尝试将模数提高到30，并将动作点设置为9、18和27.当我这样做时，#rotate2实际在控制台回到9之前第二次运行.这就像超时选项是不被尊重.有什么建议?

I also tried upping the modulus to 30 and settings the action points at 9, 18, and 27. When I do that #rotate2 actual runs a second time before the console gets back to 9. It's as if the timeout option is not being respected. Any suggestions?

JS Fiddle链接: http://jsfiddle.net/6yGET/2/

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
        );


    });
});

推荐答案

它并没有太多的作用，它可以忽略您的超时，但是似乎调用"next"正在开始循环以获取下一个.它的行为很奇怪.我怀疑这可能是因为它不是为像这样手动分页而设计的.

Its not so much that its ignoring your timeout but it seems that calling "next" is starting it cycling to get the next one. Its very strange behaviour going on though. I suspect it may be that its just not designed for being manually paged like this.

我已经找到了一种可以做你想要的方法.这将使用延迟"属性，并在其首页上以适当的延迟分别初始化每个循环.

I have found a way to do what you want though. Which is to use the "delay" property and initialise each cycle separately with an appropriate delay on its first page.

    $('#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的原因是，否则，第一次转换似乎发生在延迟+超时秒数之后.

The reason for the -10000 on each of the delays is because otherwise the first transition seems to happen after delay+timeout seconds.

这篇关于jQuery Cycle多个旋转器的运行顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！