今回は、様々な効果が簡単に設定できるイメージスライダーを紹介します。
サイトのメインビジュアル等に使用できるかと思います。
jQuery Cycle Plugin というプラグインです。
ダウンロード先は以下のURLから
そして、実際に使用してみたデモは以下からご覧ください
今回は、イージング効果をつけるため、そのプラグインも使用します。
jQuery Cycle Pluginの使い方
使用方法ですが、まずは、以下のファイルを読み込みます。
|
1 2 3 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type='text/javascript' src='js/jquery.easing.1.3.js'></script> <script type='text/javascript' src='js/jquery.cycle.all.js'></script> |
そして、あとはスライダーをさせたい箇所のidがmainImgであれば、
|
1 | <script type="text/javascript"><br /> $(document).ready(function(){<br /> $('#mainImg').cycle();<br />});<br /></script> |
と設定するだけです。
実際は効果とか切り替えの速さを変更する必要があると思います。
それは下記のdemoの解説のソースをご覧ください。
htmlは、画像imgだけでもulのリストでも大丈夫です。
実際のDEMOのソースは下記になります。
js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <script type="text/javascript"> //1.sample $(document).ready(function(){ $('#mainImg').cycle({ fx: 'turnLeft', //エフェクト効果 speed: 1000, //エフェクトのスピード timeout: 3000 //画像の表示時間 }); }); //2.sample $(document).ready(function(){ $('#mainImg2').cycle({ fx: 'scrollLeft', speed: 1000, timeout: 3000 }); }); //3.sample $(document).ready(function(){ $('#mainImg3').cycle({ fx: 'fade', speed: 1000, timeout: 3000 }); }); $(document).ready(function(){ $('#mainImg4').cycle({ fx: 'scrollLeft', speed: 2000, timeout: 5000, easing: 'easeOutBounce' //イージング効果 }); }); </script> |
html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <h3>1.sample</h3> <div id="mainImg"> <img src="photo1.jpg"> <img src="photo2.jpg"> <img src="photo3.jpg"> <img src="photo4.jpg"> </div> <h3>2.sample</h3> <ul id="mainImg2"> <li><img src="photo1.jpg"></li> <li><img src="photo2.jpg"></li> <li><img src="photo3.jpg"></li> <li><img src="photo4.jpg"></li> </ul> <h3>3.sample</h3> <div id="mainImg3"> <img src="photo1.jpg"> <img src="photo2.jpg"> <img src="photo3.jpg"> <img src="photo4.jpg"> </div> <h3>4.sample</h3> <div id="mainImg4"> <img src="photo1.jpg"> <img src="photo2.jpg"> <img src="photo3.jpg"> <img src="photo4.jpg"> </div> |
cssは特に設定していません。
このように簡単にイメージスライダーが設定できます。
オプションも豊富で、「前へ」「次へ」も設置できるようです。
また、イージング効果もたくさんあるので、色々な表現ができます。
イージングのプラグインのサイトは以下から
実際に動きを試すこともできます。
このプラグインとは違ったスライダーも紹介していますので、
そちらもご覧ください。
