jQuery の Cycle で、フェードイン・フェードアウト切替のスライドショー
ホームページの案件で
「画像をFlashを使って切り替えて表示させたい。」
という要望が結構多い。
もちろん、Flashを使って画像をフェードイン&フェードアウトさせても良いのだが、
なんだFlashのソフトを立ち上げて、画像を読み込んで・・・
など、作成するのにある程度の時間を要するし、メンテナンスなんかの時も大変。
そこで、jQueryを使って画像を簡単にフェードイン&フェードアウトして切り替える方法をメモしておきます。
〔サンプル例〕
5つの画像を、フェードイン・フェードアウトのアニメーションで、順番に表示する。
1つの画像の表示時間は、2秒。
フェードイン・フェードアウトのアニメーション動作時間は、3秒。
1.それぞれのjavascriptを読み込む
<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="jquery.cycle.all.js"></script>
2.javascriptのコードを記載
<script> <!-- jQuery( function() { jQuery( '#jquery-cycle' ) .cycle( { fx: 'fade', speed: 3000, timeout: 2000 } ); } ); // --> </script>
【fx】
スライドが切り替わるアニメーションの種類を指定するオプション。 フェードイン・フェードアウトのアニメーションにするには、「fade」を指定。
【speed】
スライドが切り替わるアニメーション動作速度を指定するオプション。 3000ミリ秒を指定した。
【timeout】
スライド1つ1つの表示時間を指定するオプション。 2000ミリ秒を指定した。
3.htmlに画像を記載
</p> <div id="jquery-cycle"><img src="1.jpg" /> <img src="2.jpg" /> <img src="3.jpg" /> <img src="4.jpg" /> <img src="5.jpg" /></div> <p>
以上。