gpt4 book ai didi

javascript - 如何在 .js 幻灯片中交叉淡入淡出图像

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

这是我的幻灯片 div:

<div class="header">
<img name="slide" class="slide">
</div>

它的CSS:

.slide{
width: 80%;
height: auto;
filter: brightness(90%);
}

和 JavaScript:

var i = 0;
var images = [];
var time = 4000;


images[0] = '1.png';
images[1] = '2.png';
images[2] = '3.png';

function changeImg() {
document.slide.src = images[i];

if (i < images.length -1) {
i++;

}
else
{
i = 0;
}


setTimeout("changeImg()", time);

}

window.onload = changeImg;

现在我希望它交叉淡入淡出,目前它只是非常突然地切换图像,但我希望它平滑。有什么帮助吗?

最佳答案

您需要在 css 类上添加不透明度设置为 0 的内容,然后创建一个不透明度设置为 1 的新类,这样您将在经过特定时间段后触发切换不透明度的函数

<style>
.slide {
border: none;
opacity: 0;
position: absolute;
top: 0;
left: 0;
-webkit-transition: opacity 2s linear;
-moz-transition: opacity 2s linear;
-o-transition: opacity 2s linear;
transition: opacity 2s linear;
}
.visible {
opacity: 1;
}
</style>

<div class="header">
<img id="img0" class="slide visible" src="1.png">
<img id="img1" class="slide" src="2.png">
<img id="img2" class="slide" src="3.png">
</div>

<script>
var actual = 0;
var total = 3;

function addClass(elem, name) {
elem.className = elem.className + " " + name;
}

function deleteClass(elem, name) {
var c = elem.className;
elem.className = c.replace(name, "").replace(/ /g, " ").replace(/^ | $/g, "");
}

function nextImg() {
var e;

e = document.getElementById("img" + actual);
deleteClass(e, "visible");

actual++;
if (actual > total - 1) actual = 0;

e = document.getElementById("img" + actual);
addClass(e, "visible");
}

var slider = setInterval(nextImg, 4000);
</script>

关于javascript - 如何在 .js 幻灯片中交叉淡入淡出图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52445110/

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