Tengo una función de página que muestra y oculta imágenes cada 5 segundos.
En lugar de estas dos imágenes, necesito abrir imágenes aleatorias de la lista cada vez.
Agregué una matriz con imágenes, intenté agregar la creación de una imagen en la función popup() y la eliminación de la función hidePopup(), pero no pasó nada.
var images = new Array("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"); var randomImage = Math.floor(Math.random() * images.length); popup(); function popup() { document.getElementById("disclaimer").style.display = "block"; setTimeout(hidePopup, 5000); } function hidePopup() { document.getElementById("disclaimer").style.display = "none"; setTimeout(popup, 5000); } <div id="disclaimer"> <div><img src="http://dummyimage.com/100x100/100/fff"></div> <div><img src="http://dummyimage.com/100x100/304/fff"></div> </div> <div id="disclaimer"></div> const el = document.getElementById("disclaimer"); const img = document.createElement('img') function popup() { randomImage = Math.floor(Math.random() * images.length) img.setAttribute('src', images[randomImage]) img.setAttribute('alt', 'random') el.appendChild(img); setTimeout(hidePopup, 1000); } function hidePopup() { setTimeout(popup, 1000); } popup()Nota : en la función setTimeout no llame al controlador de esa manera
setTimeout(hidePopup(), 1000);eso hará que se exceda el tamaño máximo de la pila de llamadas y su aplicación se bloqueará
Establezca una promesa y luego cambie la imagen al azar cada N milisegundos.
const 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 id = "disclaimer"; const imageElement = document.getElementById(id); function wait(ms, value) { return new Promise(resolve => setTimeout(resolve, ms, value)); } function getRandomImageIndex() { let randomImageIndex = Math.floor(Math.random() * images.length); return randomImageIndex; } function setImage() { let index = getRandomImageIndex(); var w = wait(5000, index); w.then(function(index) { console.log(index); imageElement.setAttribute('src', images[index]); }).then(function() { imageElement.classList.toggle('hide-me'); return wait(5000, 1); }).then(function() { imageElement.classList.toggle('hide-me'); setImage(); }); } // start it off setImage(); .hide-me { display: none; } <div id="disclaimer"> <div><img src="http://dummyimage.com/100x100/100/fff" alt="howdy"></div> </div>Una mejor manera de hacer esto sería cambiar la fuente de la imagen.
var images = new Array("//dummyimage.com/100x100/100/fff", "//dummyimage.com/100x100/304/fff", "//dummyimage.com/100x100/508/fff", "//dummyimage.com/100x100/70B/fff", "//dummyimage.com/100x100/90F/fff", "//dummyimage.com/100x100/AA0/fff", "//dummyimage.com/100x100/CB0/fff", "//dummyimage.com/100x100/EC0/fff"); popup(); function popup() { randomImage = images[Math.floor(Math.random()*images.length)]; document.getElementById("changeThis").style.display = "block"; document.getElementById("changeThis").src = randomImage; setTimeout(hidePopup, 5000); } function hidePopup() { document.getElementById("changeThis").style.display = "none"; setTimeout(popup, 5000); } <img src="//dummyimage.com/100x100/100/fff" id="changeThis"> Si prefiere que las imágenes no desaparezcan, puede eliminar style.display = "none"; y reemplace setTimeout(popup, 5000); con popup();
Debe reemplazar // con https:// o http:// si se accede a esto como un archivo.