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

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

sponsors

使用方法

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>
※画像などを使用すると、面白そうです。

サンプル

sponsors

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