1

クリックすると背景の位置を変更するこの（ここでは簡略化された）コードがありますが、それらも自動ループに入れる必要があります

<script type="text/javascript">
$(window).load(function(){
    $(".sle1").click(function() {
        $(".slimgs").animate({backgroundPosition: '-908px 0px'});
    });
    $(".sle2").click(function() {
        $(".slimgs").animate({backgroundPosition: '-681px 0px'});
    });
    $(".sle3").click(function() {
        $(".slimgs").animate({backgroundPosition: '-454px 0px'});
    });
});
</script>

つまり、ページの読み込みから 5 秒後に、この最初の関数が実行されます。

$(".sle1").click(function() {
       $(".slimgs").animate({backgroundPosition: '-908px 0px'});
});

次に、5 秒後に .sle2 に到達し、5 秒後に .sle3 (最後の関数) に到達すると、戻って最初の関数を再度実行する必要があります (ループ)。

各関数の後に ", 5000)" を入れてみましたがうまくいきませんでした

どんな助けでも大歓迎です

4

4 に答える 4

3

window.setIntervalを使用して、5 秒ごとに関数を実行します。

これら 3 つの関数を循環させるには、それらすべてを配列に格納し、毎回 i を次に呼び出す関数に設定します。

var i = 0;
var functions = [
    function() {
        // instead of copying that code, you could also do
        // $(".sle1").click() - or you can just use functions[0]
        // as argument when assigning the click listener.
        $(".slimgs").animate({backgroundPosition: '-908px 0px'});
        i = 1;
    },
    function() {
        // second animation here
        i = 2
    },
    function() {
        // third animation here
        i = 0
    }
];
window.setInterval(function () {
    functions[i]();
}, 5000);

[編集]: クリックしても機能しないため、リングカウンターはもうありません。
将来の参考のために：自動切り替えを妨げるためにクリックする必要がなく、自動循環のみで同様のものをアーカイブしたい場合i=は、関数内の th ステートメントを取り除き、代わりにi++; i%= functions.lengthafterを挿入しfunctions[i]();ます。

于 2013-11-03T21:07:46.850 に答える
1

これはうまくいくはずですが、もっとエレガントな方法があります

$(window).load(function(){
    $(".sle1").click(function() {
        $(".slimgs").animate({backgroundPosition: '-908px 0px'});
        window.setTimeout(function() {
             $(".sle2").click();
        },5000);
    });
    $(".sle2").click(function() {
        $(".slimgs").animate({backgroundPosition: '-681px 0px'});
        window.setTimeout(function() {
             $(".sle3").click();
        },5000);
    });
    $(".sle3").click(function() {
        $(".slimgs").animate({backgroundPosition: '-454px 0px'});
        window.setTimeout(function() {
             $(".sle1").click();
        },5000);
    });

    window.setTimeout(function() {
             $(".sle1").click();
    },5000);
});
于 2013-11-03T21:07:23.840 に答える
1 
setTimeout(
    function() {
        $(".sle1").trigger('click');

        setInterval(
            function() {
                $(".sle1").trigger('click');
            },
            15000
        );

    },
    5000
);

setTimeout(
    function() {
        $(".sle2").trigger('click');

        setInterval(
            function() {
                $(".sle2").trigger('click');
            },
            15000
        );

    },
    10000
);

setTimeout(
    function() {
        $(".sle3").trigger('click');

        setInterval(
            function() {
                $(".sle3").trigger('click');
            },
            15000
        );

    },
    15000
);
于 2013-11-03T21:07:36.727 に答える
0

コードを改善してより簡潔にしたい場合は、 を使用して次のことを試すことができますwindow.setInterval。

function changeBackground(interval, frames) {
    var int = 1;
    function changer() {
        document.body.id = "b" + int;
        int++;
        if (int === frames) {
            int = 1;
        }
    }
    var swap = window.setInterval(changer, interval);
}
changeBackground(2000, 10); //milliseconds, frames

オンラインの例

あなたの例について話すと、あまり明確ではないため、わかりにくいです。エフェクト.stop()に と 持続時間を追加してみてください:.animate()

$(window).load(function(){
    $(".sle1").click(function() {
        $(".slimgs").stop().animate({backgroundPosition: '-908px 0px'}, 5000);
    });
    $(".sle2").click(function() {
        $(".slimgs").stop().animate({backgroundPosition: '-681px 0px'}, 5000;
    });
    $(".sle3").click(function() {
        $(".slimgs").stop().animate({backgroundPosition: '-454px 0px'}, 5000);
    });
});

.stop() - jQuery.stop()メソッドは、アニメーションまたはエフェクトを終了前に停止するために使用されます。

于 2013-11-03T21:06:19.667 に答える