Question

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

活动图像应为

在三秒钟内淡入80％不透明度
停留1秒
在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/

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

1 个答案: