Tengo una presentación de diapositivas de imágenes que estoy haciendo usando setInterval . Me gustaría que se mantenga durante 5 s en el primer elemento y luego 1 s en los elementos adicionales cada vez que se repite. Esto es lo que probé:
let current = 0, delay = 5000; const slides = document.querySelectorAll('.slide'); setInterval(function() { for (var i = 0; i < slides.length; i++) { slides[i].style.opacity = 0; } current = (current != slides.length - 1) ? current + 1 : 0; console.log(current); if (current === 0) { delay = 5000; } else { delay = 1000; } slides[current].style.opacity = 1; }, delay); .slider { width:300px; height:150px; } .slider img { position: absolute; transition: opacity .5s ease-in; } .slider img + img { opacity:0; } <div class="slider"> <img class="slide" src="https://via.placeholder.com/350x150?text=Hold 5 Seconds" /> <img class="slide" src="https://via.placeholder.com/350x150/0000FF/808080?text=Hold 1 Second" /> <img class="slide" src="https://via.placeholder.com/350x150/FF0000/FFFFFF?text=Hold 1 Second" /> <img class="slide" src="https://via.placeholder.com/350x150/000000/FFFFFF?text=Hold 1 Second" /> </div> Esto no parece funcionar, supongo que porque una vez que se ha establecido el retraso setInterval , no se puede cambiar. Entonces, ¿cómo haría para que la primera imagen se muestre durante 5 segundos, las siguientes 3 se muestren durante 1 segundo y luego regresen a 5 segundos en la primera imagen?
No puede cambiar el intervalo de esa manera. Llama repetidamente a una función o ejecuta un fragmento de código, con un retraso de tiempo fijo entre cada llamada. Al actualizar el intervalo, debe borrar y crear uno nuevo con un nuevo tiempo de retraso como el ejemplo a continuación. Pero creo que debería intentar usar setTimeOut en su lugar.
let current = 0, delay = 5000, nIntervId = null; const slides = document.querySelectorAll('.slide'); changeTheSlideItem = function(){ for (var i = 0; i < slides.length; i++) { slides[i].style.opacity = 0; } current = (current != slides.length - 1) ? current + 1 : 0; console.log(current); if (current === 0) { delay = 5000; } else { delay = 1000; } slides[current].style.opacity = 1; if(nIntervId){ clearInterval(nIntervId); } nIntervId = setInterval(changeTheSlideItem, delay); } nIntervId = setInterval(changeTheSlideItem, delay);Puedes usar setTimeOut para eso. Guardo casi de tu código para que lo puedas entender.
let current = 0, delay = 5000; const slides = document.querySelectorAll('.slide'); function showNextSlide() { for (var i = 0; i < slides.length; i++) { slides[i].style.opacity = 0; } slides[current].style.opacity = 1; if (current === 0) { delay = 5000; } else { delay = 1000; } current = (current != slides.length - 1) ? current + 1 : 0; setTimeout(showNextSlide, delay); } showNextSlide(); .slider { width:300px; height:150px; } .slider img { position: absolute; transition: opacity .5s ease-in; } .slider img + img { opacity:0; } <div class="slider"> <img class="slide" src="https://via.placeholder.com/350x150?text=Hold 5 Seconds" /> <img class="slide" src="https://via.placeholder.com/350x150/0000FF/808080?text=Hold 1 Second" /> <img class="slide" src="https://via.placeholder.com/350x150/FF0000/FFFFFF?text=Hold 1 Second" /> <img class="slide" src="https://via.placeholder.com/350x150/000000/FFFFFF?text=Hold 1 Second" /> </div>