画像をフェードイン・フェードアウトしながらスライドショー をするサンプルです。jQuery を利用すれば、数行のコードを追加するだけで実装できます。
サンプル
サンプルのソースです。
HTML
1 2 3 4 5 6 7 8 9 | <div id="cover"> <div><img src="demo-pic-1.jpg"></div> <div><img src="demo-pic-2.jpg"></div> <div><img src="demo-pic-3.jpg"></div> <div><img src="demo-pic-4.jpg"></div> <div><img src="demo-pic-5.jpg"></div> </div> |
HTML はシンプルに画像を並べただけです。画像の数はいくつあっても動作します。環境(Androidなど)によっては画像の切り替え時に縦横比率がおかしな動作をすることがあるため、「img」を「div」で囲んでいます。
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | #cover { width: 400px; height: 250px; position: relative; overflow: hidden; } #cover>div { position: absolute; top: 0; opacity: 0; } |
「#cover」で指定したサイズが表示部分のサイズです。中の要素はトップに揃えて重ね、「opacity」を切り替えて見せています。
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | (function($) { var fadeInOut = function ($element) { var $children = $element.children(), current = 0, time = 5000, speed = '3s'; $children.css({ transition: speed }) .eq(current).css({ opacity: '1' }); setInterval(function () { $children.eq(current).css({ opacity: '0' }); current = current === $children.length - 1 ? 0 : current += 1; $children.eq(current).css({ opacity: '1' }); }, time); }; fadeInOut($('#cover')); })(jQuery); |
ここでは、画像を表示している時間を５秒・画像を切り替えるスピードを３秒に設定しています。「time」と「speed」の値を変更して任意の時間に設定できます。
（「time」は setInterval に設定するミリ秒単位の数値・「speed」は css transition に設定する文字列です）
（藤崎）
