3 つのクロスフェード画像でスライドショーを作成するためのスマートなソリューションを探しています。
アクティブな画像は
- 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>
これが私の最初のフィドルです
--
これが最終的なコードです - http://jsfiddle.net/guest271314/9c32wkuk/14/ - 期待どおりに動作します。
アイデアをありがとうguest271314!