Vanilla JS轮播下一个/上一个按钮杀死鼠标悬停事件暂停

Question

我构建了一个响应迅速的小型延迟加载轮播，鼠标悬停时会暂停。 我遇到的问题是在按下“上一个”或“下一个”按钮后发生的。 一旦按下鼠标悬停暂停事件停止工作。

这是执行顺序问题还是我应该将事件侦听器放置在 carousel() 内的某个位置？

var carouselIndex=0;
var carouselID=document.getElementById("carousel");
var carouselPrev=document.getElementById("carousel-prev");
var carouselNext=document.getElementById("carousel-next");
var carouselArray=document.getElementsByClassName("carousel-item");
var intervalID;
var speed=5000;

function carouselPlus(n){
    clearInterval(intervalID);
    carouselIndex+=n;
    carousel(carouselIndex)
}

function carousel(n){
    var i;
    if(n>carouselArray.length){carouselIndex=1}
    if(n<1){carouselIndex=carouselArray.length}
    if(carouselIndex>carouselArray.length){carouselIndex=1}
    if(carouselArray[carouselIndex-1].classList.contains("lazy")){
        carouselArray[carouselIndex-1].classList.remove("lazy")
    }
    for(i=0;i<carouselArray.length;i++){
        carouselArray[i].style.opacity="0";
        carouselArray[i].style.zIndex="0"
    }
    setTimeout(function(){
        carouselArray[carouselIndex-1].style.opacity="1";
        carouselArray[carouselIndex-1].style.zIndex="1"
    },500);
    
    intervalID=setInterval(carouselPlus,speed,1);
}

carouselPrev.addEventListener("click",function(){carouselPlus(-1)});
carouselNext.addEventListener("click",function(){carouselPlus(1)});
carouselPlus(1);
carouselID.addEventListener("mouseover",function(){clearInterval(intervalID)});
carouselID.addEventListener("mouseout",function(){intervalID=setInterval(carouselPlus,speed,1)});

更新

JSFiddle 示例

Answer 1

弄清楚了，看起来我在错误的时间调用了 setInterval() 和 clearInterval() 函数，这导致了各种时间问题，尤其是与连接到选项卡的“点击”事件结合时。

我还清理了一些图像过渡。 下面是稍微修改的 javaScript 和一个有效的JSFiddle链接。

var carouselIndex=0;
var carouselID=document.getElementById("carousel");
var carouselPrev=document.getElementById("carousel-prev");
var carouselNext=document.getElementById("carousel-next");
var carouselArray=document.getElementsByClassName("carousel-item");
var intervalID;
var speed=5000;

function carouselPlus(n){
    carouselIndex+=n;
    carousel(carouselIndex)
}

function carousel(n){
    var i;
    if(n>carouselArray.length){carouselIndex=1}
    if(n<1){carouselIndex=carouselArray.length}
    if(carouselArray[carouselIndex-1].classList.contains("lazy")){carouselArray[carouselIndex-1].classList.remove("lazy")}
    for(i=0;i<carouselArray.length;i++){
        if(i!=carouselIndex-1){
            carouselArray[i].style.opacity="0";
            carouselArray[i].style.zIndex="0"
        } else {
            carouselArray[carouselIndex-1].style.opacity="1";
            carouselArray[carouselIndex-1].style.zIndex="1"
        }
    }
}

carouselID.addEventListener("mouseover",function(){clearInterval(intervalID)});
carouselID.addEventListener("mouseout",function(){intervalID=setInterval(carouselPlus,speed,1)});
carouselPrev.addEventListener("click",function(){carouselPlus(-1)});
carouselNext.addEventListener("click",function(){carouselPlus(1)});
intervalID=setInterval(carouselPlus,speed,1);