0

画像スライダーを作ろうとしています。これで、スライダーの基本部分を取得しました。唯一のことは、スライダーが 5 秒ごとに新しい画像を自動的に表示することです (既に作成されています) が、ユーザーがスライダー メニューをホバーするとすぐに、5 秒のタイマーは停止しません。 .

これは私のスライダー コードです。

var index = $(this).parent("li").index();

        var item_y = $(this).parent("li").offset().top;
        var item_x = $(this).parent("li").offset().left;

        $("#slider li a").each(function(){
            $(this).removeClass("active");
            Cufon.refresh();
        });

        $(this).addClass("active");

        $("#slider_arrow").css({
            'top' : item_y,
            'left' : item_x-109
        });

        $("#slider_image li").hide().each(function(i,v){
            if (i == index) {
                $(this).fadeIn("medium");
            }
        });

        Cufon.refresh();

これは実際には - ホバー時の - アクションです。以下は、5 秒ごとに発生するアクションのコードです。

setInterval(function(){

        var current_index = $("#slider li a.active").parent("li").index();

        var new_index = $("#slider li").eq((current_index+1));

        if (new_index.length > 0)
        {
            new_index.children("a").mouseover();
        }
        else
        {
            $("#slider li:first-child").children("a").mouseover();
        }

    }, 5000);

だから私が欲しいのは、ユーザーが#slider liメニューからアイテムに触れるとすぐに5秒間隔をリセットすることです.

どうすればこれを達成できますか？

ありがとう

4

2 に答える 2

0

一時停止可能な JavaScript タイムアウトを作成する方法については、この回答を確認してください。

それはうまくいくはずです。

于 2012-04-18T10:01:37.913 に答える
0

必要なときに呼び出すことができるように、間隔ハンドルを保存するclearInterval()必要があります。

var myinterval = setInterval(
    ....
, 5000);

$('#slider li').mouseenter(function() {
    if(myinterval) clearInterval(myInterval);
};
于 2012-04-18T09:14:55.077 に答える