Estoy tratando de cambiar las imágenes de fondo de un div, pero de alguna manera se ejecuta una vez y muestra la última imagen y no itera.
JS
let wrapper = document.querySelector('.wrapper'); let backImages = ['backimage1.jpg', 'backimage2.jpg', 'backimage3.jpg']; // First way setInterval(() => { for (let bg in backImages) { wrapper.style.background = `url('${backImages[bg]}')`; } }, 3000); // Second way let changeBg = () => { for (let bg in backImages) { wrapper.style.background = `url('${backImages[bg]}')`; } }; setInterval(changeBg, 3000);¿Cómo puedo hacer que siga iterando sobre todas las imágenes sin cesar?
Espero que esto sea lo que necesitas:
let wrapper = document.querySelector('.wrapper'); let backImages = ['backimage1.jpg', 'backimage2.jpg', 'backimage3.jpg']; wrapper.style.background = `url('${backImages[0]}')`; let startIndex = 0; setInterval(() => { startIndex = startIndex + 1; if (startIndex == backImages.length) { startIndex = 0; } wrapper.style.background = `url('${backImages[startIndex]}')`; }, 3000); <div class="wrapper"></div>Ah, esto se debe a que la función está haciendo el forloop todo a la vez.
Función de inicio después de 3 segundos.
hacer bucle for
Cambiar 1
cambio 2
cambio 3
Entonces Aplicar.Querrás tener una iteración fuera de eso.
let wrapper = document.querySelector('.wrapper'); let backImages = ['backimage1.jpg', 'backimage2.jpg', 'backimage3.jpg']; //Set a cycle count, and get the max number in your array. var bgCycleCount = 0; var bgCycleMax = backImages.length; setInterval(() => { //Apply the BG for the current array position. wrapper.style.background = `url('${backImages[bgCycleCount]}')`; if(bgCycleCount == bgCycleMax) { bgCycleCount = 0; //Reset if you've reached the end } else { bgCycleCount++; //If not the end, increment the array position } }, 3000);En ambos casos, está comenzando a ejecutar el bucle desde el principio.
let wrapper = document.querySelector('.wrapper'); let backImages = ['https://www.thespruce.com/thmb/2fz1zlPNq7cj7QkLAtKdqYrKvs0=/3704x2778/smart/filters:no_upscale()/the-difference-between-trees-and-shrubs-3269804-hero-a4000090f0714f59a8ec6201ad250d90.jpg', 'https://www.sciencenewsforstudents.org/wp-content/uploads/2020/04/1030_LL_trees-1028x579.png', 'https://m.media-amazon.com/images/I/71WcZqPYToL._SL1200_.jpg' ]; let count = 0; setInterval(() => { wrapper.style.background = `url('${backImages[count]}')`; count = count === backImages.length - 1 ? 0 : count + 1; }, 3000); .wrapper { width: 500px; height: 500px; border: 1px solid red; } <div class='wrapper'></div>