javascript - I have been studying the carousel chart I made for a month. I would like to ask you about the problems that arise in it.

Question

There are two questions: {code...} {code...}

高洛峰 · Answer

var timer=setInterval(right,1500)
 $stp.mouseout(function(){
       timer = setInterval(right,1500)
})
 $stp.mouseover(function(){
        clearInterval(timer)
 })

If you reset the timer when the mouse is moved out, remember to assign a value to timer, otherwise the subsequent clearInterval will not know the clear sei~

阿神 · Answer

 var timer=setInterval(right,1500)
        $stp.mouseout(function(){
            setInterval(right,1500)
        })
        $stp.mouseover(function(){
            clearInterval(timer)
        })

There is a problem here. The timer is turned on at the beginning. After the first over, the timer is turned off. When mouseout is performed again, a timer is turned on $stp.mouseout(function(){

            setInterval(right,1500)
        })

But this timer is not a timer, so you cannot clear this timer later.

某草草 · Answer




    
    
    Title

(function () {
    let scroll = document.getElementById("scroll");
    let images = Array.prototype.slice.call(document.querySelectorAll("#scroll > img"));
    
    let index = 0;
    images[index].style.display = "block";
    
    let startScroll = function () {
        return setInterval(
            function () {
                for(let image of images){
                    image.style.display = "none";
                }
                images[index].style.display = "block";
                index = (index+1)>3?0:index+1
            },
            1000
        );
    };

    let int = startScroll();

    scroll.addEventListener("mouseover",function (e) {
        clearInterval(int);
    });

    scroll.addEventListener("mouseout",function (e) {
        int = startScroll();
    })


})();

黄舟 · Answer

Why no one answered my second question?