香草 JS 轮播 next/prev 按钮杀死鼠标悬停事件暂停

Question

我构建了一个小型的、响应式的、延迟加载的轮播，它会在鼠标悬停时暂停。我遇到的问题是在按下 'prev' 或 'next' 按钮后发生的。一旦按下，鼠标悬停暂停事件将停止工作。

这是执行顺序问题还是我应该将事件侦听器放置在 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 example

Answer 1

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

我还稍微清理了图像过渡。下面是稍微修改后的 javaScript 和有效的 JSFiddle link.

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

香草 JS 轮播 next/prev 按钮杀死鼠标悬停事件暂停

Vanilla JS carousel next/prev button killing mouseover event pause

javascript

event-listener

setinterval

carousel

clearinterval