jquery - 暂停用jQuery制作的无限循环

Question

我正在使用无限循环功能，该功能根据我的需要进行了一些修改：

$(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上的工作示例

我想要做的是在鼠标悬停时设置动画暂停并在鼠标离开时恢复它。

谢谢！

Answer 1

这是设置全局标志以在悬停时暂停和播放的方法，以及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”选择器来稍微提高性能。

Answer 2

有两种方法可以实现这一点：

1. 清除动画，然后重新启动。这也将确保与下一个项目的差距始终保持不变。
2. 使用全局标志从轮换函数中提前返回。true只要鼠标悬停在新闻项目上，就将标志设置为。

Answer 3

看看这个JQFAQ.com，这里是暂停和恢复计时器的答案。这里有更多常见问题解答，我希望这会帮助您获得更多想法