Obtuve una presentación de diapositivas automática que también funciona manualmente. Mi problema es que quiero que el temporizador (para la presentación de diapositivas automática) se reinicie cuando presiona uno de los 2 botones para la presentación de diapositivas manual. Porque ahora el temporizador no se reinicia y las imágenes a veces cambian inmediatamente después de presionar el botón manual. Agradecería cualquier ayuda o aporte a este problema. ¡Gracias!
var slideIndex = 0; showSlides(); var slides, dots; //For the manual slideshow buttons. function plusSlides(position) { slideIndex += position; if (slideIndex > slides.length) { slideIndex = 1; } else if (slideIndex < 1) { slideIndex = slides.length; } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; } //OnClick function for the dots below the slideshow. function currentSlide(index) { if (index > slides.length) { index = 1; } else if (index < 1) { index = slides.length; } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[index - 1].style.display = "block"; dots[index - 1].className += " active"; } //Function for the automatic slideshow function showSlides() { var i; slides = document.getElementsByClassName("hero-slides"); dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) { slideIndex = 1; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex - 1].style.display = "block"; /* dots[slideIndex - 1].className += " active"; */ setTimeout(showSlides, 5000); }Debe mantener el controlador setTimeout y restablecerlo cuando llame a plusSlides() o currentSlide() .
Entonces, al comienzo del archivo, debe crear una variable que sea accesible en cada función:
var slides, dots, timerHandler; var autoSlideTimeout = 5000; //(Keeping timeout as variable is also a good idea)Cuando llame a la diapositiva automática, guarde el controlador:
function showSlides() { //... timerHandler = setTimeout(showSlides, autoSlideTimeout); }Y en las otras dos funciones necesitas restablecer el temporizador:
function plusSlides(position) { //... clearTimeout(timerHandler) timerHandler = setTimeout(showSlides, autoSlideTimeout); } function currentSlide(index) { //... clearTimeout(timerHandler) timerHandler = setTimeout(showSlides, autoSlideTimeout); }