我正在尝试对一组图像进行交叉淡入淡出,以便在每个图像之间平滑传输,以进行幻灯片放映。我尝试过 fadeIn 和 fadeOut 以及 fadeTo 但似乎都没有创建交叉淡入淡出效果。这里的其他文章都不能准确回答我的问题。
该功能尚未完全完成,所以我知道图像不会重置,我只是想让交叉淡入淡出工作。
$(function() {
var slides = ["images/slideshow1.jpg", "images/slideshow2.jpg", "images/slideshow3.jpg", "images/slideshow4.jpg", "images/slideshow5.jpg"];
var slidePos = 0;
setInterval(function() {
slidePos++;
$("#slideshow-image").fadeOut(500).fadeIn(1000).attr("src", slides[slidePos]);
}, 3000);
});
实际:图像切换到下一个,然后淡出,然后淡入 预期:交叉淡入淡出
最佳答案
您必须制作不透明度为零的第二个图像元素,并通过将其位置设置为绝对来使其重叠。
然后将其不透明度设置为 1.0,并删除现在隐藏在新图像元素下方的旧图像元素。
然后重复这个过程。
如果您只有两个元素并在它们之间循环,则不必创建新元素。
关于javascript - 如何使用 jQuery 交叉淡入淡出图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57213320/