Динамически менять изображения сразу Ванила javascript

Question

На фоне у меня есть четыре разных изображения, и я хочу, чтобы эти img динамически менялись, например, каждые две секунды.Мне удается изменить один img, но как мне изменить все изображения одновременно?

Вот мой код:

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);

Я знаю, что мог бы сделать что-то вроде этого: document.getElementbyTagName("img'), но что мне делать дальше?

https://jsfiddle.net/ofqkmwsh/

Answer 1

Вам нужен только один 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">

Вы также можете использовать способность Chrome для перехода к фоновому изображению:

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>

Если у вас несколько галерей , вы можете сделать что-то вроде:

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>