簡単にスライダーを作成できるJavaScript「jFlow」
スライダーがあると非常に便利ですが、結構利用するのは難しかったりします。
jQueryプラグインの「jFlow」を利用すると簡単にスライダーが作成できます。
sponsors
使用方法
jFlowからjquery.flow.1.2.jsをjQueryからjquery.jsをダウロードします。
<script type="text/javascript" src="/test/js/jquery-1.3.2.js"></script>
あとはスライドコンテンツなどを以下のように記述します。
<script type="text/javascript" src="/test/js/jquery.flow.1.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#id名").jFlow({
slides: "#mySlides", //スライド部分のid
controller: ".jFlowControl", //コントローラーのクラス
slideWrapper : "#jFlowSlide", //各スライドID
selectedWrapper: "jFlowSelected", //選択中のスライド
width: "50%", //幅
height: "200px",//高さ
prev: ".jFlowPrev", //前へのクラス
next: ".jFlowNext" //次へのクラス
});
});
</script>
<div id="id名">
上記で以下のようなスライダーが完成します。
<span class="jFlowControl">No 1</span>
<span class="jFlowControl">No 2</span>
<span class="jFlowPrev"><<Prev</span> <span class="jFlowNext">Next>></span>
</div>
<div id="mySlides">
<div>スライドコンテンツ1</div>
<div>スライドコンテンツ2</div>
</div>
簡単にスライダーを作成できるJavaScript「jFlow」サンプル
sponsors
記事作成:2009年2月27日 10:08
記事URL:http://www.skuare.net/2009/02/javascriptjflow_1.html
TOP > javascript > UI関連 > 簡単にスライダーを作成できるJavaScript「jFlow」
前の記事:ハイクオリティなカラーピッカーJavaScript「GcColor」
次の記事:背景画像にトランジション効果をつけられるJavaScript「BGTransition」
あなたにはこちもお勧め!
jQuery プラグインまとめ!