如何为此幻灯片添加淡入淡出效果？

Question

我在这里有一个幻灯片，我很乐意发挥淡入淡出效果。 不知道怎么做，我对JavaScript不是很熟悉，我所知道的是如何复制和粘贴代码（即使我犯了错误） 页面在这里： http://lazlo.us/bw/getimages.html

我正在使用PHP脚本从目录中提取图像以创建幻灯片。

创建幻灯片的JavaScript非常简单（我在网上找到了它）：

var curimg = 0;
function rotateimages()
{
    document.getElementById("slideshow").setAttribute("src", "" + galleryarray[curimg]);
    curimg = (curimg<galleryarray.length - 1)? curimg + 1 : 0;
}

window.onload = function()
{
    setInterval("rotateimages()", 3500);
}

任何人都可以帮我把褪色效果放进去吗？

拉​​兹洛

Answer 1

您不需要更新图像的src，而是需要插入第二个元素，然后将其淡入。

这里是一个simple fiddle，我使用CSS来处理opacity上的转换。

基本上，它会：

1. 创建图像元素
2. 在现有图像元素之前插入
3. 等待100毫秒，然后将旧图像的不透明度设置为0

图像预加载器也有助于正确启动动画。祝你好运！