javascript - 同时显示 3 张图像的实验幻灯片

Question

我正在寻找一种智能解决方案来创建包含 3 个交叉淡入淡出图像的幻灯片。

事件图像应该是

1. 三秒内淡入 80% 的不透明度
2. 停留1秒
3. 3 秒内淡出至 0% 不透明度

所有图像都应执行相同的操作，但时间偏移 2 秒。结果，所有 3 个图像应该同时显示。

<div id="cycler">
    <img class="active" src="http://lorempixel.com/720/576/cats/" alt="" />
    <img src="http://lorempixel.com/720/576/sports/" alt="" />
    <img src="http://lorempixel.com/720/576/food/" alt="" />
    <img src="http://lorempixel.com/720/576/fashion/" alt="" />
</div>

这是我的起始fiddle

--

这是最终代码 - http://jsfiddle.net/guest271314/9c32wkuk/14/ -按预期工作。
感谢guest271314您的想法!

Answer 1

CSS

#cycler img {
    position:absolute;
    opacity:0.0;
}

js

$(function () {
    $.fx.interval = 0;
    (function cycleImages(n, cycler) {
        cycler.eq(n)         
           .fadeTo(3000, 0.8, function () {
            n = n < cycler.length - 1 ? ++n : 0;
            cycleImages(n, cycler) && $(this).delay(2000, "fx")
        }).fadeTo(3000, 0.055);          
    }(0, $('#cycler img')));
});

jsfiddle http://jsfiddle.net/9c32wkuk/15/