Question

0

155

Views

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>

about 4 years ago · Juan Pablo Isaza

3 answers

Answer question

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>

about 4 years ago · Juan Pablo Isaza Report

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.

about 4 years ago · Juan Pablo Isaza Report

Answer question

Find remote jobs

Accepted Answer · 2022-07-03T11:54:48.690Z

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

0

155

Pop up images on the page every few seconds

3 answers

0

0

0

Find remote jobs

Andres GPT