【JavaScript】 クロスフェード(jQueryのプラグイン)
jQueryのプラグインクロスフェードを使うことで、フェードして置換する事ができます。
jQueryの適応方法
jQueryをヘッドで読み込ませます。<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
クロスフェードプラグインを使う。
CSS Crossfader上記のリンクからcrossfaderをダウンロードする。
htmlにプラグインを読み込ませます。場所はbodyの終了タグ前辺り。
<script src="js/bsn.Crossfader.js"></script>
置換を行う
置換を行うために、置換を行う要素にIDをつけておきます。例:
html
<ul id="img_fader"> <li id="img1"><img src="img/ph01.jpg" alt=""></li> <li id="img2"><img src="img/ph02.jpg" alt=""></li> <li id="img3"><img src="img/ph03.jpg" alt=""></li> <li id="img4"><img src="img/ph04.jpg" alt=""></li> </ul>
<script> var cf = new Crossfader( new Array('img1', 'img2', 'img3', 'img4'), 2000, 3000 ); </script>
2000は指定した要素のフェード時間、3000は要素の表示時間。
ここでは画像を使っていますが、画像以外(pなど)の置換も行う事ができます。