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

簡単にスライダーを作成できるJavaScript「jFlow」

｜ ｜ ｜ ｜ ｜ ｜ ｜

スライダーがあると非常に便利ですが、結構利用するのは難しかったりします。
jQueryプラグインの「jFlow」を利用すると簡単にスライダーが作成できます。

使用方法
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」サンプル

記事作成：2009年02月27日

前の記事：ハイクオリティなカラーピッカーJavaScript「GcColor」
次の記事：背景画像にトランジション効果をつけられるJavaScript「BGTransition」