skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

要素をスライドさせていくカルーセル JavaScript「jQuery carrousel」

｜ ｜ ｜ ｜ ｜ ｜ ｜

要素、特に画像、をスライドさせて表示させることで領域が小さいながらも多くの情報を伝えることが可能になります。
今回はjQueryプラグインの「jQuery carrousel」を利用します。

使用方法
jQuery carrouselから関連jsをダウンロードします。
もちろんjQueryからjquery.jsを忘れずに。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.carrousel.js"></script>
<script type="text/javascript" src="jquery.carrousel.controls.js"></script>
<script type="text/javascript" src="jquery.carrousel.effects.js"></script>
<script type="text/javascript">
$(document).ready(function(){
jQuery("#id名").carrousel();
});
</script>

上記を記述したらあとはidを付与して以下を書けば完成です。
<ul id="id名">
<li><img src="画像パス" /></li>
<li><img src="画像パス" /></li>
<li><img src="画像パス" /></li>
<li><img src="画像パス" /></li>
</ul>

その他には下記のようなオプションがあります。
$(document).ready(function(){
var carrousel = jQuery("#id明").carrousel({
effects : 'reflection', //反射効果
easing : 'easeOutBounce', //別途jquery.easing.1.3.jsが必要
speed : 500, //切り替えスピード
dispTimeout : 1000, //停止時間
dispNumber : 5, //表示数
auto : true, //自動再生
api : true // コントローラーを付ける
});
jQuery('#next').click(function () { //次へ
carrousel.next();
});
jQuery('#prev').click(function () { //前へ
carrousel.prev();
});
jQuery('#start').click(function () { //開始
carrousel.start();
});
jQuery('#stop').click(function () { //停止
carrousel.stop();
});
});

コントローラーに対応したidをふります。
<div id="api">
<a id="prev" href="#">Prev</a>
<a id="next" href="#">Next</a>
<a id="start" href="#">Start</a>
<a id="stop" href="#">Stop</a>
</div>

要素をスライドさせていくカルーセル JavaScript「jQuery carrousel」サンプル

記事作成：2009年12月04日

前の記事：スタイリッシュなデジタル時計を作るJavaScript「jDigiClock」
次の記事：第1回 Twitter研究会に参加してみた