Image Slider Issue

Question

So I have a functional image slider, which I am completely proud of, but I can't repeat the loop when the loop stops. What I have right now is that it loops on its own, and when the mouse hovers over it the loop stops. But I want the loop to continue when the mouse is not hovering over it (the container) by using the eventListener of 'mouseout'. Can you help me?

window.onload = function () {
        var nmbr_imgs = 4;
        var imgs_holder = ["IMGS/Actinium.png", "IMGS/Aluminum.png", "IMGS/Astatine.png", "IMGS/Barium.png"];
        var total = imgs_holder.length;
        var left_btn = document.getElementById('left_btn');
        var right_btn = document.getElementById('right_btn');
        var imgs_display = document.getElementById('imgs_display');

        left_btn.addEventListener('click', function() {
            total = total - 1;
            imgs_display.src = imgs_holder[total];
            if (total < 0) {
                total = nmbr_imgs - 1;
                imgs_display.src = imgs_holder[(total)];
            }
        }, false);

        right_btn.addEventListener('click', function() {
            total = total + 1;
            imgs_display.src = imgs_holder[total];
            if (total > (nmbr_imgs - 1)) {
                total = 0;
                imgs_display.src = imgs_holder[total];
            }
        }, false);

        var img_change = setInterval(function() {
            total = total + 1;
            imgs_display.src = imgs_holder[total]

            if (total > (nmbr_imgs - 1)) {
                total = 0;
                imgs_display.src = imgs_holder[total];
            }

            var container = document.getElementById('container');
            container.addEventListener('mouseover', function() {
                clearInterval(img_change);
            }, false);

            container.addEventListener('mouseout', img_change, false);
        }, 1000);
    }

Answer 1

setInterval and setTimeout return a string . They are not a function reference. When this string is passed to clearTimeout or clearInterval , the interval or timeout is stopped and removed. To restart you need to redefine the interval/timeout.

Update this. The interval setter is now wrapped in a function which is immediately called upon. When the user does a mouseout it calls startLoop again, thus resetting the interval.

    function startLoop()
    {
        img_change = setInterval(function() {
        total = total + 1;
        imgs_display.src = imgs_holder[total];

        if (total > (nmbr_imgs - 1)) {
            total = 0;
            imgs_display.src = imgs_holder[total];
        }

        }, 1000);


    }

    var container = document.getElementById('container');   
    container.addEventListener('mouseout', startLoop, false);

    container.addEventListener('mouseover', function() {
            clearInterval(img_change);
        }, false);

    startLoop();

Answer 2

What you're doing is store in img_change the ID of the interval (which you later use to clear the interval). However, when you add the mouseout event, you're passing the very same ID as it were the function to execute (which doesn't make any sense). You could try something like this:

Update

As kindly someone pointed out, you can avoid repeating code easily:

var func = function () {
    total = total + 1;
    imgs_display.src = imgs_holder[total]

    if (total > (nmbr_imgs - 1)) {
        total = 0;
        imgs_display.src = imgs_holder[total];
    }

};
var img_change = setInterval(func, 1000);

var container = document.getElementById('container');

container.addEventListener('mouseover', function () {
    clearInterval(img_change);
}, false);

container.addEventListener('mouseout', function () {
    img_change = setInterval(func, 1000);
}, false);

Here's the code snippet:

 var imgs_display = document.getElementById('img_display'); var imgs_holder = ["http://www.w3schools.com/images/w3schools_green.jpg","http://www.w3schools.com/html/pic_mountain.jpg","http://www.w3schools.com/html/pic_graph.png"]; var nmbr_imgs = imgs_holder.length; var total = 0; var func = function () { total = total + 1; imgs_display.src = imgs_holder[total] if (total > (nmbr_imgs - 1)) { total = 0; imgs_display.src = imgs_holder[total]; } }; var img_change = setInterval(func, 1000); var container = document.getElementById('container'); container.addEventListener('mouseover', function () { clearInterval(img_change); }, false); container.addEventListener('mouseout', function () { img_change = setInterval(func, 1000); }, false);

 <div id="container"> <img id="img_display" src="" /> </div>