圖像滑塊問題

Question

所以我有一個功能性的圖像滑塊，我對此感到非常自豪，但是當循環停止時我無法重復循環。 我現在擁有的是它自己循環，當鼠標懸停在它上面時，循環停止。 但是我希望通過使用“mouseout”的事件監聽器，當鼠標沒有懸停在它（容器）上時循環繼續。 你能幫助我嗎？

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和setTimeout返回一個string 。 它們不是函數引用。 當將此字符串傳遞給clearTimeout或clearInterval ，將停止並刪除間隔或超時。 要重新啟動，您需要重新定義間隔/超時。

更新這個。 間隔設置器現在包含在一個立即調用的函數中。 當用戶執行 mouseout 時，它會再次調用 startLoop，從而重置間隔。

    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

您正在做的是在 img_change 中存儲間隔的 ID（稍后您將使用它來清除間隔）。 但是，當您添加 mouseout 事件時，您傳遞的 ID 與要執行的函數完全相同（這沒有任何意義）。 你可以嘗試這樣的事情：

更新

正如有人指出的那樣，您可以輕松避免重復代碼：

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

這是代碼片段：

 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>