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>
以上で完成です。
サンプル
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor lacus sit amet nisi tincidunt non venenatis enim laoreet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor lacus sit amet nisi tincidunt non venenatis enim laoreet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor lacus sit amet nisi tincidunt non venenatis enim laoreet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor lacus sit amet nisi tincidunt non venenatis enim laoreet.
My Groovy Header 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor lacus sit amet nisi tincidunt non venenatis enim laoreet.
My Groovy Header 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor lacus sit amet nisi tincidunt non venenatis enim laoreet.
My Groovy Header 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor lacus sit amet nisi tincidunt non venenatis enim laoreet.
My Groovy Header 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor lacus sit amet nisi tincidunt non venenatis enim laoreet.
Javascriptサンプルページ一覧
skuare.net