要素をスライドさせていくカルーセル JavaScript「jQuery carrousel」

要素、特に画像、をスライドさせて表示させることで領域が小さいながらも多くの情報を伝えることが可能になります。
今回はjQueryプラグインの「jQuery carrousel」を利用します。
要素をスライドさせていくカルーセル JavaScript「jQuery carrousel」サンプル

使用方法
jQuery carrouselから関連jsをダウンロードします。
もちろんjQueryからjquery.jsを忘れずに。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.carrousel.js"></script>
<script type="text/javascript" src="jquery.carrousel.controls.js"></script>
<script type="text/javascript" src="jquery.carrousel.effects.js"></script>
<script type="text/javascript">
$(document).ready(function(){
jQuery("#id名").carrousel();
});
</script>

上記を記述したらあとはidを付与して以下を書けば完成です。
<ul id="id名">
<li><img src="画像パス" /></li>
<li><img src="画像パス" /></li>
<li><img src="画像パス" /></li>
<li><img src="画像パス" /></li>
</ul>

その他には下記のようなオプションがあります。
$(document).ready(function(){
var carrousel = jQuery("#id明").carrousel({
effects : 'reflection', //反射効果
easing : 'easeOutBounce', //別途jquery.easing.1.3.jsが必要
speed : 500, //切り替えスピード
dispTimeout : 1000, //停止時間
dispNumber : 5, //表示数
auto : true, //自動再生
api : true // コントローラーを付ける
});
jQuery('#next').click(function () { //次へ
carrousel.next();
});
jQuery('#prev').click(function () { //前へ
carrousel.prev();
});
jQuery('#start').click(function () { //開始
carrousel.start();
});
jQuery('#stop').click(function () { //停止
carrousel.stop();
});
});

コントローラーに対応したidをふります。
<div id="api">
<a id="prev" href="#">Prev</a>
<a id="next" href="#">Next</a>
<a id="start" href="#">Start</a>
<a id="stop" href="#">Stop</a>
</div>

要素をスライドさせていくカルーセル JavaScript「jQuery carrousel」サンプル

sponsors

「要素をスライドさせていくカルーセル JavaScript「jQuery carrousel」」をシェアする

記事作成:
記事URL:

TOP > > > 要素をスライドさせていくカルーセル JavaScript「jQuery carrousel」