Question

我正在尝试交叉淡入淡出并循环播放一系列5幅图像，这是一幅全屏背景图像。

我将以下css类应用于body。

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()也可以起作用而不是设置延迟，但如果长时间运行则会使控制台变得混乱。

交叉渐变背景图像

1 个答案: