gpt4 book ai didi

javascript - 淡入淡出背景图像

转载 作者:太空宇宙 更新时间:2023-11-04 13:18:33 25 4
gpt4 key购买 nike

我正在尝试交叉淡入淡出并循环显示一系列 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

最佳答案

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() 也可以代替设置延迟,但如果长时间运行它会使控制台困惑。

关于javascript - 淡入淡出背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21353245/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com