javascript - 悬停暂停功能

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; }
);