动态地立即改变图像Vanila javascript

Question

在后台，我有四个不同的图像，我希望那些@Service @Scope(ConfigurableBeanFactory.SCOPE_PROTOTYPE) public class BeanA { @Autowired @Lazy private BeanB beanB; public void printBeanA() { System.out.println(getBeanName()); } public void printBeanABeanB() { System.out.println(getBeanName() + " - " + beanB.getBeanName()); } public String getBeanName() { return "Bean A"; } } @Service @Scope(ConfigurableBeanFactory.SCOPE_PROTOTYPE) public class BeanB { @Autowired @Lazy private BeanA beanA; public void setBeanA(BeanA beanA) { this.beanA = beanA; } public void printBeanB() { System.out.println(getBeanName()); } public void printBeanBBeanA() { System.out.println(getBeanName() + " - " + beanA.getBeanName()); } public String getBeanName() { return "Bean B"; } } 动态更改，例如每两秒钟。我设法更改了一个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); ，但我接下来要做什么？

https://jsfiddle.net/ofqkmwsh/

Answer 1

您只需要一个img

＆＃13;

＆＃13;

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

＆＃13;

<img id="img" src="//placehold.it/100x100/0bf?text=1">

＆＃13;

＆＃13;

＆＃13;

您还可以利用Chrome转换背景图片的功能：

＆＃13;

＆＃13;

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

＆＃13;

#img {
  height: 50vh;
  background: red none 50% 50% / cover no-repeat;
  transition: 0.8s;
}

＆＃13;

<div id="img"></div>

＆＃13;

＆＃13;

＆＃13;

如果你有多个画廊，你可以这样做：

＆＃13;

＆＃13;

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

＆＃13;

.Gallery {
  float: left;
  width: 25%;
  height: 100px;
  background: transparent none 50% 50% / cover no-repeat;
  transition: 0.8s;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;