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