JavaScriptで要素をスライドさせる「bxSlider jQuery content slider 」
[ 2分で読めて簡単導入できます]
要素のスライドはサイトでよく使用する手法ではないでしょうか？
それが簡単にできる「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日
