javascript - 元素悬停时暂停功能

Question

我有一个图像 slider ，每 5 秒更改一次图像，但我希望 slider 在我将鼠标悬停在 div img 上时暂停。有没有办法在悬停时暂停“theRotator”功能，然后在鼠标移出 div 后重新启动它？谢谢大家!

function theRotator() {
    //Set the opacity of all images to 0
    $('div.rotator ul li').css({opacity: 0.0});

    //Get the first image and display it (gets set to full opacity)
    $('div.rotator ul li:first').css({opacity: 1.0});

    //Call the rotator function to run the slideshow,

    setInterval('rotate()',5000);

}

$(document).ready(function() {      
    //Load the slideshow
    theRotator();
    $('div.rotator').fadeIn(1000);
    $('div.rotator ul li').fadeIn(1000); // tweek for IE
});

Answer 1

您需要检索由 setInterval 函数返回的间隔句柄。此外，我使用了 mouseenter 和 mouseleave，因为它们更适合您想要的功能。

function theRotator() {
    //Set the opacity of all images to 0
    $('div.rotator ul li').css({opacity: 0.0});

    //Get the first image and display it (gets set to full opacity)
    $('div.rotator ul li:first').css({opacity: 1.0});

    //Call the rotator function to run the slideshow,

    window.rotatorInterval = setInterval(rotate,5000);
}

$(document).ready(function() {

    //Load the slideshow
    theRotator();

    $('div img').mouseenter(function(){
         clearInterval(window.rotatorInterval);
    }).mouseleave(function() {
         window.rotatorInterval = setInterval(rotate, 5000);
    });

    $('div.rotator').fadeIn(1000);
    $('div.rotator ul li').fadeIn(1000); // tweek for IE
});