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

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

｜ ｜ ｜ ｜ ｜ ｜ ｜

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日

前の記事：jQueryベースで綺麗なLightBox風JavaScript「ColorBox」
次の記事：パスワード強度を表示できるJavaScript「pwd_strength.js」