如果我将鼠标移出或单击右箭头，则单击左箭头后，JavaScript上的滑块将不起作用

Question

使用Youtube tutorial在website上创建了一个JavaScript滑块。在本教程中，vlogger仅创建前向循环，而不创建后向循环。

根据我的想法，当用户的鼠标悬停循环停止时，滑块会在4秒钟的间隔内工作。用户可以通过单击左右箭头来控制滑块，当鼠标移出鼠标时，滑块应重新开始向前滑动。

当用户单击左箭头并滑出鼠标时，我有一个问题，滑块停止工作，如果用户单击左箭头后单击右箭头，也会发生同样的情况。 在我看来，使用Loop2后向循环后，它无法返回到前向循环。 我的代码是here或

var bannerStatus = 1;
var bannerTimer = 4000;
 
// slider starts working on load
window.onload = function() {
    bannerLoop();  
    var startBannerLoop = setInterval(function() {
    bannerLoop();
    }, bannerTimer);
    // on mouse over loop stops
    document.getElementById("main-banner").onmouseover = function() {
        console.log("Inside onmouseover function")
        clearInterval(startBannerLoop);
    },
    // on mouse out it restarts sliding to the right
    document.getElementById("main-banner").onmouseout = function() {
        startBannerLoop = setInterval(function() {
    bannerLoop();
    }, bannerTimer);
    }
    // on click on the left arrow on the slider it slides back
    document.getElementById("imgbanbtn-prev").onclick = function() {
        console.log("Inside bannerLoop2 function")
        bannerLoop2();
    }
    // on click on the right arrow on the slider it slides forward
    document.getElementById("imgbanbtn-next").onclick = function() {
        bannerLoop();
    }
}
 
// first loop to slide pictures to the right
function bannerLoop() {
    if (bannerStatus === 1) {
        console.log("insideBannerLoop")
        document.getElementById("language").style.opacity="0";
        setTimeout(function() {
            document.getElementById("work").style.right="0px";
            document.getElementById("work").style.zIndex="4";
            document.getElementById("language").style.right="-350px";
            document.getElementById("language").style.zIndex="3";
            document.getElementById("yoga").style.right="350px";
            document.getElementById("yoga").style.zIndex="2";
            document.getElementById("travel").style.right="700px";
            document.getElementById("travel").style.zIndex="1";
        }, 500);
        setTimeout(function() {
            document.getElementById("language").style.opacity="1";
        }, 1000);
       
        bannerStatus = 2;
    }
    else if (bannerStatus === 2) {
        document.getElementById("yoga").style.opacity="0";
        setTimeout(function() {
            document.getElementById("language").style.right="0px";
            document.getElementById("language").style.zIndex="4";
            document.getElementById("yoga").style.right="-350px";
            document.getElementById("yoga").style.zIndex="3";
            document.getElementById("travel").style.right="350px";
            document.getElementById("travel").style.zIndex="2";
            document.getElementById("work").style.right="700px";
            document.getElementById("work").style.zIndex="1";
        }, 500);
        setTimeout(function() {
            document.getElementById("yoga").style.opacity="1";
        }, 1000);
       
        bannerStatus = 3;
    }
    else if (bannerStatus === 3) {
        document.getElementById("travel").style.opacity="0";
        setTimeout(function() {
            document.getElementById("yoga").style.right="0px";
            document.getElementById("yoga").style.zIndex="4";
            document.getElementById("travel").style.right="-350px";
            document.getElementById("travel").style.zIndex="3";
            document.getElementById("work").style.right="350px";
            document.getElementById("work").style.zIndex="2";
            document.getElementById("language").style.right="700px";
            document.getElementById("language").style.zIndex="1";
        }, 500);
        setTimeout(function() {
            document.getElementById("travel").style.opacity="1";
        }, 1000);
       
        bannerStatus = 4;
    }
    else if (bannerStatus === 4) {
        document.getElementById("work").style.opacity="0";
        setTimeout(function() {
            document.getElementById("travel").style.right="0px";
            document.getElementById("travel").style.zIndex="4";
            document.getElementById("work").style.right="-350px";
            document.getElementById("work").style.zIndex="3";
            document.getElementById("language").style.right="350px";
            document.getElementById("language").style.zIndex="2";
            document.getElementById("yoga").style.right="700px";
            document.getElementById("yoga").style.zIndex="1";
        }, 500);
        setTimeout(function() {
            document.getElementById("work").style.opacity="1";
        }, 1000);
       
        bannerStatus = 1;
    }
}
// second loop to slide pictures to the left       
function bannerLoop2() {
    if (bannerStatus === 1) {
        console.log("insideBannerLoop")
        document.getElementById("travel").style.opacity="0";
        setTimeout(function() {
            document.getElementById("work").style.left="0px";
            document.getElementById("work").style.zIndex="4";
            document.getElementById("travel").style.left="-350px";
            document.getElementById("travel").style.zIndex="3";
            document.getElementById("yoga").style.left="350px";
            document.getElementById("yoga").style.zIndex="2";
            document.getElementById("language").style.left="700px";
            document.getElementById("language").style.zIndex="1";
            }, 500);
            setTimeout(function() {
            document.getElementById("travel").style.opacity="1";
            }, 1000);
       
            bannerStatus = 2;
            }
        else if (bannerStatus === 2) {
            document.getElementById("yoga").style.opacity="0";
            setTimeout(function() {
                document.getElementById("travel").style.left="0px";
                document.getElementById("travel").style.zIndex="4";
                document.getElementById("yoga").style.left="-350px";
                document.getElementById("yoga").style.zIndex="3";
                document.getElementById("language").style.left="350px";
                document.getElementById("language").style.zIndex="2";
                document.getElementById("work").style.left="700px";
                document.getElementById("work").style.zIndex="1";
                }, 500);
                setTimeout(function() {
                document.getElementById("yoga").style.opacity="1";
                }, 1000);
       
                bannerStatus = 3;
            }
        else if (bannerStatus === 3) {
            document.getElementById("language").style.opacity="0";
                setTimeout(function() {
                document.getElementById("yoga").style.left="0px";
                document.getElementById("yoga").style.zIndex="4";
                document.getElementById("language").style.left="-350px";
                document.getElementById("language").style.zIndex="3";
                document.getElementById("work").style.left="350px";
                document.getElementById("work").style.zIndex="2";
                document.getElementById("travel").style.left="700px";
                document.getElementById("travel").style.zIndex="1";
                }, 500);
                setTimeout(function() {
                document.getElementById("language").style.opacity="1";
                }, 1000);
       
                bannerStatus = 4;
            }
        else if (bannerStatus === 4) {
            document.getElementById("work").style.opacity="0";
            setTimeout(function() {
                document.getElementById("language").style.left="0px";
                document.getElementById("language").style.zIndex="4";
                document.getElementById("work").style.left="-350px";
                document.getElementById("work").style.zIndex="3";
                document.getElementById("travel").style.left="350px";
                document.getElementById("travel").style.zIndex="2";
                document.getElementById("yoga").style.left="700px";
                document.getElementById("yoga").style.zIndex="1";
                }, 500);
                setTimeout(function() {
                document.getElementById("work").style.opacity="1";
                }, 1000);
                bannerStatus = 1;
            }
}