0

私は自分のニーズに合わせて少し変更された無限ループ関数を使用しています:

$(document).ready(function() {
var NewsRotator = {init: function()
{
    var numberOfTitles = $('.NewsRotator li').length;
    //set current item
    var currentTitle = 0;
    //show first item
    $('.NewsRotator li').eq(currentTitle).fadeIn(1000); //initial fade-in
    //loop through the items
    var infiniteLoop = setInterval(function(){
        $('.NewsRotator li').eq(currentTitle).fadeOut(100); //current item fade-out time
        if(currentTitle == numberOfTitles -1){
            currentTitle = 0;
        }else{
            currentTitle++;
        }
        $('.NewsRotator li').eq(currentTitle).fadeIn(900); //next item fade-in time
    }, 3000); //interval between items
}
};
NewsRotator.init();
});

これがjsFiddleの実例です

私がやりたいのは、マウスオーバーでアニメーションの一時停止を設定し、マウスが離れたときに再開することです。

ありがとうございました！

4

3 に答える 3

3

jsFiddleとともに、ホバー時に一時停止して再生するグローバル フラグを設定する方法を次に示します。

var NewsRotator = (function(){
var numberOfTitles = $('.NewsRotator li').length,
    currentTitle = 0;
return {
    flag : true,
    init : function(){
        $('.NewsRotator').on({
            mouseenter : function(){
                NewsRotator.flag = false;
            },
            mouseleave : function(){
                NewsRotator.flag = true;
            }
        });
        $('.NewsRotator li').eq(currentTitle).fadeIn(1000);
        infiniteLoop = setInterval(function () {
            if (NewsRotator.flag == true){
                $('.NewsRotator li').eq(currentTitle).fadeOut(100);
                if (currentTitle == numberOfTitles - 1) {
                    currentTitle = 0;
                } else {
                    currentTitle++;
                }
                $('.NewsRotator li').eq(currentTitle).fadeIn(900);
            } else {
                return false;
            }
        }, 3000);
    }
};
}());
$(document).ready(function(){
NewsRotator.init();
});

また、「li」セレクターをキャッシュすることで、パフォーマンスをわずかに改善できると思います。

于 2013-01-08T14:31:05.983 に答える
1

これを実現するには、次の 2 つの方法があります。

  1. アニメーションをクリアしてから再開します。これにより、次のアイテムまでのギャップが常に一定になります。
  2. グローバル フラグを使用して、回転関数から早期に戻ります。trueマウスがニュース項目の上にある限り、フラグを に設定します。
于 2013-01-08T14:04:30.070 に答える
0

このJQFAQ.comを見てください。タイマーの一時停止と再開の答えは次のとおりです。ここには、利用可能なその他の FAQ があります。これが、より多くのアイデアを得るのに役立つことを願っています。

于 2013-01-08T15:43:00.270 に答える