javascript - 淡入淡出背景图像

Question

我正在尝试交叉淡入淡出并循环显示一系列 5 张全屏背景图片。

我正在将以下 CSS 类应用于正文。

body {
   display: table;
   margin:0px;
   height:100%;
   background-image:url('images/image1.jpg') ;
   background-size: 1500px auto;
   -webkit-font-smoothing: subpixel-antialiased !important;
}

我想按顺序用下一张图片替换背景图片，即 images/image2.jpg、images/image3.jpg，每 8 秒一次，之前的图片淡出，新图片淡入，并且能够来控制衰落的速度。

我想知道执行此操作的最佳方法是什么。我尝试使用 Jquery Cycle，但它不符合我的需要，因为这是一个全屏背景图像。

这个链接是迄今为止最有用的。 http://css3.bradshawenterprises.com/cfimg/#cfimg1

Answer 1

images = ["https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png",
"https://i.kinja-img.com/gawker-media/image/upload/s--XkYSDzxz--/c_scale,fl_progressive,q_80,w_800/hflvykipmc5g22mc3m0m.jpg",
"https://vignette2.wikia.nocookie.net/symbolism/images/4/43/Orange.png/revision/latest?cb=20140818120046",
"https://vignette4.wikia.nocookie.net/joke-battles/images/0/0e/Green.jpg/revision/latest?cb=20170111231844"];
// These are just placeholder images, replace the URLs with anything you desire.

bgNum = 0;
setInterval(changeBackground,5000); // Change to the number of milliseconds desired between frame changes
changeBackground();

function changeBackground() {
  c = document.getElementById('bgContainer');
  c.removeChild(c.childNodes[0]);
  bg2 = document.createElement('img');
  bg2.src = images[bgNum];
  bg2.classList.add('bg');
  bg2.style.opacity = '0';
  bg2.onload = setTimeout(changeOpacity,100); // For some reason, updating the opacity does not work immediately after inserting the element
  c.appendChild(bg2);
  bgNum++;
  bgNum %= images.length; // Reset image counter
}

function changeOpacity() {
  c = document.getElementById('bgContainer');
  c.childNodes[0].style.opacity = '0';
  c.childNodes[1].style.opacity = '1';
}
  

#bgContainer img {
  transition: opacity 1.5s;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
}

<div id='bgContainer'><img><img></div>
test text

我找不到任何方法来使用 background-image 复制它，但我相信这会复制您期待的行为。要使用它，只需根据需要更改间隔时间和图像列表即可。

我尝试在页面上一次只放两张图片，并堆叠在一起。但是，我相信一次将所有图像放在一起并交替使用不透明度值可能会更清晰，并且无需调用 setTimeout()。奇怪的是，调用 console.log() 也可以代替设置延迟，但如果长时间运行它会使控制台困惑。