Tweet｜ ｜ ｜ ｜

[ 1分で読めて簡単導入できます]

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

使用方法
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>

そのほかのオプションは以下のサンプルの通りです。
要素を回転表示させるJavaScript「jQuery Carousel」サンプル

記事作成：2009年03月11日