如何每3秒淡出图像+内容？

Question

我有一个小脚本，每3秒更换一次图像。

我希望它每隔3秒更换一次，但会有淡入淡出效果。

我还希望它在图像底部显示一些文字。

另外，只有没有JS才能用html + css完成吗？

这是我的脚本：

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(3000, 10); //milliseconds, frames

这是 css ：

#b1 { background: hsl(0, 50%, 50%); }
#b2 { background: hsl(30, 50%, 50%); }
#b3 { background: hsl(60, 50%, 50%); }

查看实际操作：JSfiddle