0

1 つのページに 3 つのローテーターを配置しようとしています。このローテーターは順番に実行されますが、同期されたトランジションはありません。

以下のコードを書きました。間隔関数を毎秒実行するように設定し、アクセス回数をカウントし、結果を 10 でモジュラスしてアクション ポイントを取得できると考えました。

ただし、これは期待どおりに機能していません。#rotate2 が期待どおりに開始され、次に #rotate3 が開始されますが、その後 #rotate2 に戻ります。次のことが本当におかしくなり、スライドがすべて消えてしまいます。

また、モジュラスを 30 に上げて、アクション ポイントを 9、18、および 27 に設定してみました。これを行うと、コンソールが 9 に戻る前に #rotate2 actual が 2 回実行されます。タイムアウト オプションが尊重されていないようです。 . 助言がありますか？

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 に答える