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

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

sponsors

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

記事作成:
記事URL:

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