let i = 0; function change() { if (i < res.length) document.getElementById("cont").style.backgroundImage = `url(static/letters/${res[i++]}.jpg)`; } window.onload = function() { setInterval(change, 2000); };Quiero este cambio solo una vez hasta que se muestren todas las imágenes y luego quiero que el contenedor esté vacío. ¿Qué pasa con mi código?
Puedes comprobar esta implementación.
let i = 0; let interval //the variable to keep the current interval //simulate your `res` data const res = [ "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg", "https://images.unsplash.com/photo-1612151855475-877969f4a6cc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aGQlMjBpbWFnZXxlbnwwfHwwfHw%3D&w=1000&q=80", "https://www.w3schools.com/w3css/img_lights.jpg" ] function change() { if (i < res.length) { document.getElementById("cont").style.backgroundImage = `url(${res[i++]})`; } else { document.getElementById("cont").style.backgroundImage = "none"; clearInterval(interval); //remove the current interval after finish the loop i = 0; //reset index value } } window.onload = function() { interval = setInterval(change, 2000); //set the current interval }; #cont { height: 300px; width: 300px; background-position: center; background-repeat: no-repeat; background-size: 300px 300px; transition: 0.2s; } <div id="cont"></div>Esto podría hacer el trabajo:
if (i < res.length) document.getElementById("cont").style.backgroundImage = `url('static/letters/${res[i++]}.jpg')`;