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

スムーズにスクロールするカルーセルJavaScript「Just Another Carousel」

｜ ｜ ｜ ｜ ｜ ｜ ｜

ECサイトを中心にわりと広がりつつあるカルーセル。
これを使用することで、省スペースで広がりのある見せ方が可能になりました。
jQueryプラグインの「Just Another Carousel」では、矢印などをクリックしたときだけではなく、要素へのマウスオーバーでもスクロールでき、さらに動きもスムーズです。

使用方法
Just Another Carouselからjquery.jac.css、jquery.jac.jsを、またjQueryからjquery.jsをダウンロードします。
<link rel="stylesheet" href="jquery.jac.css" media="screen" />
<script type="text/javascript" src="jquery-1.3.js"></script>
<script type="text/javascript" src="jquery.jac.js"></script>
<script type="text/javascript">
function init() {
var jac = {
enableMouse:true,
childSizeFixed:false
};
$(".jac").jac(jac);
}
$(init);
</script>

最後に以下を指定すれば完成です。
<div class="jac">
<ul>
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
　：
</ul>
</div>
※画像などを使用すると、面白そうです。
スムーズにスクロールするカルーセルJavaScript「Just Another Carousel」サンプル

記事作成：2009年02月04日

前の記事：リンク先の画像をプレビューするJavaScript「imgpreview」
次の記事：ダブルクリックで表示させるメニューを作る「JQuery NavigMenu」