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

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

sponsors

使用方法

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>

サンプル

- - Start - Stop

Javascriptサンプルページ一覧
skuare.net