Question

我正在使用Infinite Loop function，它根据我的需要进行了一些修改：

$(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

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

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

Answer 3

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

使用jQuery暂停无限循环

3 个答案: