Question

I have a function written in javascript that allows me to scroll through an array of images iterated at a certain interval, now I would like to add some more functionality to it by pausing the rotation when I hover over any of the images in the array.

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

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