CODEWITHSUNDEEP
javascriptimage
ona
ona

Reputation: 23

Dynamicaly change images at once Vanila javascript

On the background, I have four different images and I want those img dynamically change for example every two seconds. I manage to change one img, but how do I change all images at once?

Here is my code:

const im1 = document.getElementById("img-1");

const images = ["images/photo1.png","images/photo2.png","images/photo3.png", "images/photo4.png"];
let index = 0;

function changeImage()
{
  im1.setAttribute("src", images[index]);

  index++;
  if(index >= images.length)
  {
    index=0;
  }
}

setInterval(changeImage, 2000);

I know that I could do something like this: document.getElementbyTagName("img'), but what I should do next?

https://jsfiddle.net/ofqkmwsh/

Upvotes: 2

Views: 53

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206669

You need only one img

const img = document.getElementById("img");
const images = [
 "//placehold.it/100x100/0bf?text=1",
 "//placehold.it/100x100/f0b?text=2",
 "//placehold.it/100x100/fb0?text=3",
 "//placehold.it/100x100/b0f?text=4",
];
let index = 0;

function changeImage() {        
  index = ++index % images.length;        // Incr. and reset index to 0 if exceeds     
  img.setAttribute("src", images[index]); // set src attribute
}

setInterval(changeImage, 2000);
<img id="img" src="//placehold.it/100x100/0bf?text=1">

You could also exploit Chrome's ability to transition a background-image:

const img = document.getElementById("img");
const images = [
 "//placehold.it/800x600/0bf?text=1",
 "//placehold.it/800x600/f0b?text=2",
 "//placehold.it/800x600/fb0?text=3",
 "//placehold.it/800x600/b0f?text=4",
];
const n = images.length;
let c = 0;
images.forEach(src => new Image().src = src); // Preload images
const changeImage = () => img.style.backgroundImage = "url('"+ images[c++ % n] +"')";

changeImage(); // Init!
setInterval(changeImage, 2000);
#img {
  height: 50vh;
  background: red none 50% 50% / cover no-repeat;
  transition: 0.8s;
}
<div id="img"></div>

If you have multiple galleries you could do something like:

const Gallery = (id, time) => {
  const gal = document.getElementById(id);
  const images = gal.getAttribute("data-images").split(",").map(img => img.trim());
  const n = images.length;
  let c = 0;
  images.forEach(src => new Image().src = src); // Preload images
  const changeImage = () => gal.style.backgroundImage = `url(${images[c++ % n]})`;

  changeImage(); // Init!
  setInterval(changeImage, time);
};


Gallery("Gallery-1", 2000);
Gallery("Gallery-2", 3000);
.Gallery {
  float: left;
  width: 25%;
  height: 100px;
  background: transparent none 50% 50% / cover no-repeat;
  transition: 0.8s;
}
<div class="Gallery" id="Gallery-1" data-images="
 //placehold.it/800x600/0bf?text=1,
 //placehold.it/800x600/f0b?text=2,
 //placehold.it/800x600/fb0?text=3,
 //placehold.it/800x600/b0f?text=4
"></div>
<div class="Gallery" id="Gallery-2" data-images="
 //placehold.it/800x600/83a?text=1,
 //placehold.it/800x600/a38?text=2,
 //placehold.it/800x600/3a8?text=3,
 //placehold.it/800x600/38a?text=4
"></div>

Upvotes: 2

Related Questions