要素を回転表示させるJavaScript「jQuery Carousel」

amazonなどでは、書籍を回転表示させ一覧性と省スペースを兼ね備えています。
jQuery Carouselを使用することで、似たよう表示が可能です。

sponsors

使用方法

jQuery Carouselからjquery.carousel.jsを、jQueryからjquery.jsをjQuery Easing Pluginからjquery.easing.jsをダウロードします。

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.carousel.js"></script>
<script type="text/javascript" src="jquery.easing1.3.js"></script>
<script type="text/javascript" language="JavaScript">
$(function(){
	$("div.要素名").carousel();
});
</script>
あとは上記で記述した要素にulで記述すれば出来上がりです。

<div class="div要素名">
	<ul>
		<li>回転要素1</li>
		<li>回転要素2</li>
		<li>回転要素3</li>
	</ul>
</div>
そのほかのオプションは以下のサンプルの通りです。

サンプル

sponsors

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