0

3 つのクロスフェード画像でスライドショーを作成するためのスマートなソリューションを探しています。

アクティブな画像は

  1. 3 秒で 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!

4

1 に答える 1

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/

于 2014-08-13T04:43:24.203 に答える