0

Javascript用于设置一组要旋转的对象，当鼠标移到它上面时我需要停止旋转。我还是新手，我猜这个解决方案很简单，但我就是无法让它发挥作用。我已经尝试将整个事情放在一个 if 语句中，但这似乎只是完全破坏了代码我也尝试编写了几个方法来做到这一点，但它们似乎也破坏了代码。

这是仅旋转对象的工作javascript。

$(window).load(function() { //start after HTML, images have loaded

var InfiniteRotator =
{

    init: function()
    {
        //initial fade-in time (in milliseconds)
        var initialFadeIn = 1000;


        //interval between items (in milliseconds)
        var itemInterval = 5000;

        //cross-fade time (in milliseconds)
        var fadeTime = 2500;

        //count number of items
        var numberOfItems = $('.rotating-item').length;

        //set current item
        var currentItem = 0;

        //show first item
        $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);

        var infiniteLoop = setInterval(function(){
            $('.rotating-item').eq(currentItem).fadeOut(fadeTime);

            if(currentItem == numberOfItems -1){
                currentItem = 0;
            }else{
                currentItem++;
            }
            $('.rotating-item').eq(currentItem).fadeIn(fadeTime);

        }, itemInterval);
    }
};

InfiniteRotator.init();

});

如果您需要 Html，请说，anyhelp atall 非常感谢

4

1 回答 1

0

您应该清除刚刚设置的计时器，并在您将鼠标移开时将其重新设置。infiniteLoop在定义之后试试这个：

$('.rotating-item').hover(function() {
    clearInterval(infiniteLoop);
}, function() {
    infiniteLoop = setInterval(function(){
        $('.rotating-item').eq(currentItem).fadeOut(fadeTime);
        if (currentItem == numberOfItems - 1) {
            currentItem = 0;
        } else {
            currentItem++;
        }
        $('.rotating-item').eq(currentItem).fadeIn(fadeTime);

    }, itemInterval);
}

为了避免代码重复，您还可以在之前定义该重复函数，但这并不是绝对必要的。

于 2013-09-09T09:40:25.127 回答