Question

所以我有一个功能图像滑块，我感到非常自豪，但是当循环停止时我无法重复循环。我现在拥有的是它自己循环，当鼠标悬停在它上面时，循环停止。但是当鼠标没有悬停在它（容器）上时，我希望通过使用＆＃39; mouseout＆＃39;的eventListener来继续循环。你能救我吗？

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

Here's the new fiddle

亲切的问候。

图像滑块问题

2 个答案: