使用 JavaScript 将鼠标悬停在 JavaScript 上时停止一组旋转的对象

stop a rotating set of objects when mouse over with javascript

本文关键字：JavaScript 一组 旋转 对象 悬停 鼠标 使用      更新时间：2023-09-26

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，那么只需说，任何帮助都非常感谢

您应该清除刚刚设置的计时器，并在将鼠标移开时将其重新设置。在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);
}

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

相关文章：