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

JavaScriptで要素をスライドさせる「bxSlider jQuery content slider 」

｜ ｜ ｜ ｜ ｜ ｜ ｜

要素のスライドはサイトでよく使用する手法ではないでしょうか？
それが簡単にできる「bxSlider | jQuery Content Slider」を紹介します。

使用方法
bxSlider | jQuery Content Sliderからjquery.bxSlider.jsをjQueryからjquery.jsをダウンロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.bxSlider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#id名').bxSlider({
mode: 'slide', //slide,fade,ticker
auto: 'true', //自動再生
speed: 1000, //切り替えスピード
pause: 3500, //停止時間
width: 430, //幅
wrapper_class: 'class名' //要素を囲むclass名
});
});
</script>

あとは動かしたい要素を記述していきます。
<div id="id名">
<div class="item">
テキストテキストテキストテキストテキスト
</div><!-- end item -->
<div class="item">
テキストテキストテキストテキストテキスト
</div><!-- end item -->
<div class="item">
テキストテキストテキストテキストテキスト
</div><!-- end item -->
<!-- 要素名 -->
</div>

以上で完成です。
JavaScriptで要素をスライドさせる「bxSlider jQuery content slider 」サンプル

記事作成：2009年12月01日

前の記事：twitterのタイムラインを表示するJavaScript10
次の記事：スタイリッシュなデジタル時計を作るJavaScript「jDigiClock」