• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

121
Vistas
Pop up images on the page every few seconds

I have a page function that shows and hides images every 5 seconds.

Instead of these two images, I need to open random images from the list each time.

I added an array with images, tried to add the creation of an image in the popup() function, and the removal of the hidePopup() function, but nothing happened.

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>

almost 3 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

  • In the HTML file you should create a div with an id disclaimer
<div id="disclaimer"></div>
  • Then in the js file you should select the HTML element out of the popup function
const el =  document.getElementById("disclaimer");
  • And create an enter code hereimage element out of the popup function
const img = document.createElement('img') 
  • Then in the popup function you should create a random image every time the function get called with setTimeout to change the image src, set attribute src for image with random image number from images array, and append an image element to the div in HTML file and call setTimeout with hidepop
function popup() {
  randomImage = Math.floor(Math.random() * images.length)
  img.setAttribute('src', images[randomImage])
  img.setAttribute('alt', 'random')
  el.appendChild(img);
  setTimeout(hidePopup, 1000);
}
  • Then create a hidepop()
function hidePopup() {
  setTimeout(popup, 1000);
}
  • And call popup function
popup()

Note : In setTimeout function don't call the handler like that

setTimeout(hidePopup(), 1000);

that will cause Maximum call stack size exceeded error and you app will crashed

almost 3 years ago · Juan Pablo Isaza Denunciar

0

Set a promise then change the image randomly every N milliseconds.

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>

almost 3 years ago · Juan Pablo Isaza Denunciar

0

A better way to do this would be to change the source of the image.

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">

If you would prefer to not have the images disappear, you can remove style.display = "none";, and replace setTimeout(popup, 5000); with popup();

You should replace // with https:// or http:// if this is being accessed as a file.

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda