gpt4 book ai didi

javascript - 在JS脚本中添加淡入淡出功能?

转载 作者:行者123 更新时间:2023-11-28 17:49:39 26 4
gpt4 key购买 nike

所以我有一个在三个图像之间交替的基本脚本,我想添加一个简单的淡入/淡出/淡出或任何看起来最好的东西,这样它就不会那么笨重。我怎样才能实现这个目标?或者有更好的办法吗?

function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("img").src = images[x];
}
function displayPreviousImage() {
x = (x <= 0) ? images.length - 1 : x - 1;
document.getElementById("img").src = images[x];
}
function startTimer() {
setInterval(displayNextImage, 3000);
}
var images = [], x = -1;
images[0] = "assets/img/logo1.png";
images[1] = "assets/img/logo2.png";
images[2] = "assets/img/logo3.png";

最佳答案

您可以在更改 src 之前设置图像的不透明度:

function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
var imgvar = document.getElementById("img");
imgvar.classList.add("fadeOut");
setTimeout(function() {
imgvar.src = images[x];
imgvar.classList.remove("fadeOut");
}, 500);
}
function displayPreviousImage() {
x = (x <= 0) ? images.length - 1 : x - 1;
var imgvar = document.getElementById("img");
imgvar.classList.add("fadeOut");
setTimeout(function() {
imgvar.src = images[x];
imgvar.classList.remove("fadeOut");
}, 500);
}
function startTimer() {
setInterval(displayNextImage, 3000);
}
var images = [], x = -1;
images[0] = "assets/img/logo1.png";
images[1] = "assets/img/logo2.png";
images[2] = "assets/img/logo3.png";

在 CSS 中:

img {
opacity: 1;
transition: opacity 500ms ease-in-out;
}
img.fadeOut {
opacity: 0;
}

注意:我在 JavaScript 中添加了 500 毫秒超时,因为我怀疑否则动画根本不可见,因为它会立即从可见变为不可见,然后再次可见。

关于javascript - 在JS脚本中添加淡入淡出功能?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45834216/

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