He construido un carrusel de carga pequeño, receptivo y lento que se detiene al pasar el mouse. El problema que tengo ocurre después de presionar los botones "anterior" o "siguiente". Una vez presionado, el evento de pausa al pasar el mouse deja de funcionar.
¿Es este un problema de orden de ejecución o debería colocar el detector de eventos en algún lugar dentro del carrusel ()?
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)});ACTUALIZAR
Lo descubrí, parece que estaba llamando a las funciones setInterval() y clearInterval() en el momento equivocado, lo que estaba causando todo tipo de problemas de sincronización, especialmente cuando se combinaba con los eventos de 'clic' conectados a las pestañas.
También limpié un poco las transiciones de imagen mientras estaba en eso. Aquí hay un vistazo al javaScript ligeramente modificado y un enlace JSFiddle que funciona.
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);