我有一个图像滑块,该滑块每5秒钟更改一次图像,但是当我将鼠标悬停在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
});

最佳答案

您只需要清除鼠标悬停时的超时,然后在鼠标悬停时重新创建它,如下所示:

var interval;

function theRotator() {
    $('div.rotator ul li').css({opacity: 0.0});
    $('div.rotator ul li:first').css({opacity: 1.0});
    interval = setInterval(rotate, 5000);
}

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

    $('div.rotator ul li').hover(function() {
        clearInterval(interval);
    },
    function() {
        interval = setInterval(rotate, 5000);
    });
});

09-18 17:29