1

http://jsfiddle.net/4wb5P/6/を設定した div:hover スクリプトがあります (StackOverflow メンバー bfrohs の助けを借りて、ありがとう!)、ページの読み込み時にホバー状態を開始したいと思いますそして、すべての製品のホバー状態を循環します（jquery、またはブラウザー間でうまく機能するものを使用すると思います）。だから私はサイクルの状態を次のようにしようとしてきました:

  1. オンロード: デフォルトの「ホバーして詳細を表示」状態で開始
  2. 2 秒後、「製品 1 のホバー状態」に切り替わり、2 ～ 3 秒間留まります
  3. 「製品 2 のホバー状態」に切り替わり、2 ～ 3 秒間留まります
  4. 「製品 3 のホバー状態」に切り替わり、2 ～ 3 秒間留まります
  5. 次に、製品 1 に戻り、すべての製品を無期限に調べます。

ユーザーがホバー状態のいずれかをロールオーバーすると、サイクルが停止し、そのホバーにフォーカスしたままになります (ポインターがそのタイル上にある限り)。ユーザーがポインターを離すと、サイクルはステップ 1 から再開されます。

私はいくつかの Jquery が使用されていると思いますが、それが私を取得する場所です。任意の助けをいただければ幸いです。また、プラグインなどをどこから始めるべきかについての指針も大歓迎です。以下の私の現在のコードを参照してください： http://jsfiddle.net/4wb5P/6/

4

1 に答える 1

3

私のフィドルの例を参照してください: http://jsfiddle.net/bAtCS/1/

$(function() {

    var hoverprod = $('.hover_product'), len = hoverprod.length, intv;
    (function iterativehover(i) {
        hoverprod.removeClass('hover').eq(i).addClass('hover');
        intv = setTimeout(function() {
            iterativehover((i === len - 1)? 0 : i + 1)
        }, 3000);
    }(0));

    hoverprod.on('mouseenter', function() {
       clearInterval(intv);
       hoverprod.removeClass('hover');
    });

});

:hover 疑似クラスを使用するすべての場所に、いくつかの新しい CSS ルールを挿入しました。mouseenterこのサイクルは、イベントが発生するまで永久に実行されます。

初期遅延が必要な場合は、コードを次のようにラップするだけです

var rotateDivs = function() {
    var hoverprod = $('.hover_product'), len = hoverprod.length, intv;
    (function iterativehover(i) {
        hoverprod.removeClass('hover').eq(i).addClass('hover');
        intv = setTimeout(function() {
            iterativehover((i === len - 1)? 0 : i + 1)
        }, 3000);
    }(0));

    hoverprod.on('mouseenter', function() {
       clearInterval(intv);
       hoverprod.removeClass('hover');
    });
};


$(function() {
    setTimeout(rotateDivs, 3000);
});
于 2012-04-17T07:52:54.007 に答える