为 css 和 java 幻灯片添加淡入淡出

Question

我发现幻灯片放映只使用 java 和 css。 我需要这个，因为我还在我的 css 脚本中使用了背景混合模式，而这在 img src 上不起作用。

代码如下：

http://jsfiddle.net/xdUBZ/749/

也在这里：

    function run(interval, frames) {
    var int = 1;

    function func() {
        document.body.id = "b"+int;
        int++;
        if(int === frames) { int = 1; }
    }

    var swap = window.setInterval(func, interval);
}

run(6000, 10); //milliseconds, frames

这是css代码：

#b1 { background: hsl(10, 50%, 50%); }
#b2 { background: hsl(30, 50%, 50%); }
#b3 { background: hsl(60, 50%, 50%); }
#b4 { background: hsl(90, 50%, 50%); }
#b5 { background: hsl(120, 50%, 50%); }
#b6 { background: hsl(150, 50%, 50%); }
#b7 { background: hsl(180, 50%, 50%); }
#b8 { background: hsl(210, 50%, 50%); }
#b9 { background: hsl(240, 50%, 50%); }
#b10 { background: hsl(270, 50%, 50%); }

有没有办法添加淡入淡出效果？ 我还注意到您可以以毫秒为单位更改时间。 第一个毫秒没有加载图像，在毫秒将第一次结束之后，第一个图像将被加载。有没有办法立即拿出第一张图片

亲切的问候， 贾斯汀

Answer 1

如果你添加

body {
    transition-duration: 1s;
}

然后颜色会相互褪色。如果你使用图像，那么它们会淡入淡出