今回は、様々な効果が簡単に設定できるイメージスライダーを紹介します。

サイトのメインビジュアル等に使用できるかと思います。

jQuery Cycle Plugin　というプラグインです。

ダウンロード先は以下のURLから

JQuery Cycle Plugin

そして、実際に使用してみたデモは以下からご覧ください

DEMO

今回は、イージング効果をつけるため、そのプラグインも使用します。

jQuery Cycle Pluginの使い方

 

使用方法ですが、まずは、以下のファイルを読み込みます。

XHTML

<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>

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であれば、

 

JavaScript

<script type="text/javascript"><br /> $(document).ready(function(){<br /> $('#mainImg').cycle();<br />});<br /></script>

1	<script type="text/javascript"><br /> $(document).ready(function(){<br /> $('#mainImg').cycle();<br />});<br /></script>

 

と設定するだけです。

実際は効果とか切り替えの速さを変更する必要があると思います。

それは下記のdemoの解説のソースをご覧ください。

 

htmlは、画像imgだけでもulのリストでも大丈夫です。

 

 

実際のDEMOのソースは下記になります。

 

js

JavaScript

<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>

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

 

XHTML

<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>

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は特に設定していません。

 

このように簡単にイメージスライダーが設定できます。

オプションも豊富で、「前へ」「次へ」も設置できるようです。

 

また、イージング効果もたくさんあるので、色々な表現ができます。

イージングのプラグインのサイトは以下から

jQuery Easing Plugin

実際に動きを試すこともできます。

 

このプラグインとは違ったスライダーも紹介していますので、

そちらもご覧ください。

 

コンテンツスライダー、カルーセルスライダーにもなるjQueryプラグイン