悬停时暂停功能

Question

我有一个用javascript编写的函数，它允许我滚动浏览一定间隔迭代的图像数组，现在我想通过在我将鼠标悬停在任何图像上时暂停旋转来添加更多功能数组。

的Javascript

(function() {
    var rotator = document.getElementById('bigImage');
    var imageDir = '../images/headers/';
    var delayInSeconds = 5;
    var images = ['ImageOne.png', 'ImageTwo.png', 'ImageThree.png', 'ImageFour.png',
        'ImageFive.png',
        'ImageSix.png'];
    var num = 0;
    var changeImage = function() {
        var len = images.length;
        bigImage.src = imageDir + images[num++];
        if (num == len) {
            num = 0;
        }
    };
    setInterval(changeImage, delayInSeconds * 1000);

})();​

Answer 1

您可以存储从setInterval返回的id，并在图像悬停时将其传递给clearInterval。

所以，在鼠标悬停时，你清除，然后在鼠标移出时再次设置它。

希望有所帮助！

Answer 2

使用jQuery：

var rotationRunning = true;

var changeImage = function() {
    if (rotationRunning) {
        var len = images.length;
        rotator.src = imageDir + images[num++];
        if (num == len)
            num = 0;
        }
    }
};

$(rotator).hover(
    function() { rotationRunning = false; },
    function() { rotationRunning = true; }
);