Tengo dos bloques con un cambio de imagen aleatorio. El primero aparece cada 5 segundos, el segundo cada 10 segundos. Como resultado, en un momento se muestran juntos.
La pregunta es, ¿cómo puedo hacer que estos dos bloques no se toquen, sino que aparezcan a la vez?
¿Se puede hacer esto a través de setTimeout? Y luego no pude calcular todo correctamente. ¿O se debe usar algo más?
var images = ["http://dummyimage.com/100x100/100/fff", "http://dummyimage.com/100x100/304/fff", "http://dummyimage.com/100x100/508/fff", "http://dummyimage.com/100x100/70B/fff", "http://dummyimage.com/100x100/90F/fff", "http://dummyimage.com/100x100/AA0/fff", "http://dummyimage.com/100x100/CB0/fff", "http://dummyimage.com/100x100/EC0/fff"]; const el1 = document.getElementById("cat1"); const el2 = document.getElementById("cat2"); const img1 = document.createElement('img'); const img2 = document.createElement('img'); hidePopup1(); hidePopup2(); function popup1() { document.getElementById("cat1").style.display = "block"; randomImage1 = Math.floor(Math.random() * images.length); img1.setAttribute('src', images[randomImage1]); el1.appendChild(img1); setTimeout(hidePopup1, 5000); } function popup2() { document.getElementById("cat2").style.display = "block"; randomImage2 = Math.floor(Math.random() * images.length); img2.setAttribute('src', images[randomImage2]); el2.appendChild(img2); setTimeout(hidePopup2, 10000); } function hidePopup1() { document.getElementById("cat1").style.display = "none"; setTimeout(popup1, 5000); } function hidePopup2() { document.getElementById("cat2").style.display = "none"; setTimeout(popup2, 10000); } .cat1 { position: absolute; left: 20%; } .cat2 { position: absolute; left: 50%; } <div id="cat1" class="cat1"></div> <div id="cat2" class="cat2"></div>Debe combinar todas las operaciones ocultar/mostrar en una función, que alterna la visualización de los elementos y luego invierte los elementos para que en la próxima "ronda" el efecto sea el opuesto.
Además, puede agregar las imágenes al principio. No hay necesidad de repetir esto en cada tic del temporizador.
Reduje el tiempo de espera a 500 milisegundos en lugar de 5 segundos, por lo que es más fácil de verificar:
var images = ["http://dummyimage.com/100x100/100/fff", "http://dummyimage.com/100x100/304/fff", "http://dummyimage.com/100x100/508/fff", "http://dummyimage.com/100x100/70B/fff", "http://dummyimage.com/100x100/90F/fff", "http://dummyimage.com/100x100/AA0/fff", "http://dummyimage.com/100x100/CB0/fff", "http://dummyimage.com/100x100/EC0/fff"]; const elems = [document.getElementById("cat1"), document.getElementById("cat2")]; // Append the images at the start elems.forEach(el => el.appendChild(document.createElement('img'))); toggle(); function toggle() { elems[0].style.display = "block"; // Show the first image let randomImage = Math.floor(Math.random() * images.length); elems[0].children[0].setAttribute('src', images[randomImage]); elems[1].style.display = "none"; // Hide the second image elems.reverse(); // This way the next round, the show/hide will be opposite setTimeout(toggle, 500); } .cat1 { position: absolute; left: 20%; } .cat2 { position: absolute; left: 50%; } <div id="cat1" class="cat1"></div> <div id="cat2" class="cat2"></div>Primero coloque todas sus etiquetas img en una matriz:
imgTags = [img1,img2 ...] ;Y antes de hacer que aparezca cualquier imagen, haz que todas las imágenes desaparezcan:
imgTags.forEach(function(imgTag){ imgTag.style.display = "none"; }); ... img1.style.display = "block";Esto asegurará que las imágenes nunca se muestren al mismo tiempo, sin importar qué tan lento se actualice el dom.