Javascript 图像滑块问题

所以我有一个功能性的图像滑块，我非常自豪，但是当循环停止时我不能重复循环。我现在看到的是它自己循环，当鼠标悬停在它上面时，循环停止。但是我希望当鼠标没有悬停在它（容器）上时，通过使用'mouseout'的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);
    }

window.onload=函数（）{
var nmbr_imgs=4；
var imgs_holder=[“imgs/Actinium.png”、“imgs/aluminal.png”、“imgs/Astatine.png”、“imgs/baba.png”]；
var总计=imgs_持有人长度；
var left_btn=document.getElementById（'left_btn'）；
var right_btn=document.getElementById（'right_btn'）；
var imgs_display=document.getElementById（'imgs_display'）；
left_btn.addEventListener（'单击'，函数（））{
总计=总计-1；
imgs_display.src=imgs_支架[总计]；
如果（总数<0）{
总计=nmbr\U imgs-1；
imgs_display.src=imgs_支架[（总数）]；
}
}，假）；
右键\u btn.addEventListener（'单击'，函数（））{
总计=总计+1；
imgs_display.src=imgs_支架[总计]；
如果（总计>（nmbr\U imgs-1））{
总数=0；
imgs_display.src=imgs_支架[总计]；
}
}，假）；
var img_change=setInterval（函数（）{
总计=总计+1；
imgs_display.src=imgs_支架[总计]
如果（总计>（nmbr\U imgs-1））{
总数=0；
imgs_display.src=imgs_支架[总计]；
}
var container=document.getElementById（'container'）；
container.addEventListener（'mouseover'，function（）{
清除间隔（img_变化）；
}，假）；
container.addEventListener（'mouseout'，img_change，false）；
}, 1000);
}

设置间隔

和

设置超时

返回一个

字符串

。它们不是函数引用。当此字符串被传递到

clearTimeout

或

clearInterval

时，间隔或超时被停止并删除。要重新启动，需要重新定义间隔/超时

更新这个。间隔设置器现在封装在一个函数中，该函数将立即被调用。当用户执行鼠标移出操作时，它会再次调用StartOOP，从而重置间隔

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

---

您要做的是在img_中存储更改间隔的ID（稍后您将使用该ID清除间隔）。但是，当添加mouseout事件时，传递的ID与要执行的函数的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_持有人=[”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\u imgs=imgs\u holder.length；
var合计=0；
var func=函数（）{
总计=总计+1；
imgs_display.src=imgs_支架[总计]
如果（总计>（nmbr\U imgs-1））{
总数=0；
imgs_display.src=imgs_支架[总计]；
}
};
var img_change=设置间隔（func，1000）；
var container=document.getElementById（'container'）；
container.addEventListener（'mouseover'，function（）{
清除间隔（img_变化）；
}，假）；
container.addEventListener（'mouseout'，function（）{
img_change=setInterval（func，1000）；
}，假）

你能在小提琴上分享你的全部代码吗？我用完整的javascript编辑了这篇文章。
setInterval
为
img\u change
提供了一个计时器id。您需要将间隔包装在函数中<代码>img_change

现在是一个字符串，我已经将其放入代码中，它不会滑动。mouseout eventlistener不是每次鼠标在图像滑块之外时都会导致它重新启动吗？这会导致洞一直重新启动吗？反过来，它会使鼠标不滑动？任何鼠标只能发射一次。一旦鼠标离开元素，它就被声明为打开。“我不知道你是怎么把它粘贴到代码中的？”AlexanderManzano编辑。包含一个问题，但现在应该可以很好地工作。这将重复一段代码两次。这是不必要的。@Mouser谢谢你的提示，我没有注意到（我不得不去吃晚饭）。后更新。