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>

这是我的起始小提琴

--

这是最终代码 - 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/