0

我试图在一个页面上有 3 个旋转器，它们按顺序运行但没有同步转换。

我编写了下面的代码，认为我可以设置一个间隔函数以每秒运行一次，记录它被访问的次数，并将结果模数为 10 以获得我的行动点。

然而，这并没有按预期工作。#rotate2 按预期开始，然后是#rotate3，但随后又回到#rotate2。事情变得非常糟糕，幻灯片一起消失了，等等。

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

JS 小提琴链接：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
        );


    });
});
4

1 回答 1

0

与其说它忽略了您的超时，但似乎调用“下一个”正在开始循环以获取下一个。它的行为非常奇怪。我怀疑它可能只是不是为像这样手动分页而设计的。

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

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

于 2012-11-07T16:59:56.227 回答