jQuery スライドショープラグインを作った。
sSlider
クライアントからの要望でスライダーをいろいろ見たんだけど、 いいのが無い。
- UL>LIの中に画像を入れたら勝手にスライダーになってくれるけど、 ボタンは自由に配置しずらい
- 移動が終わったあとにCollBack関数を実行できない。
「いや!できるし!」
っていわれそうなんですが、つくりました! つくりましたから!
今後の為に備忘録として。
DLは以下からどうぞ
var | ログ | |
---|---|---|
var0.5 | 新規作成 | DL |
基本的な使い方
とりあえず基本的な使いたかを。
<html> <head> <title>スライダー</title> <script type="text/javascript" src="js/jquery.js"></script> </head> <script type="text/javascript" src="js/sSlider.js"></script> <body> <script type="text/javascript"> (function($) { $(window).load(function() { $('#slider').sSlider(); }); })(jQuery); </script> <h1>スライダー</h1> <ul id="slider"> <li><a class="aaa" id="a1" href="#"><img src="img/img1.jpg" alt="" /></a></li> <li><a class="aaa" id="a2"href="#"><img src="img/img2.jpg" alt="" /></a></li> <li><a class="aaa" id="a3"href="#"><img src="img/img3.jpg" alt="" /></a></li> <li><a class="aaa" id="a4"href="#"><img src="img/img4.jpg" alt="" /></a></li> </ul> <button class="sSliderBt_1">ボタン1</button> <button class="sSliderBt_2">ボタン2</button> <button class="sSliderBt_3">ボタン3</button> <button class="sSliderBt_4">ボタン4</button> </body> </html>
で動きます。 スライダーを指定するボタンは自分でコーディングしなければなりません。
オプション
名前 | デフォルト | 説明 |
---|---|---|
wrapDiv.class | sSliderWrapDiv | 一番外側のDIVのclass名 |
wrapDiv.css | {}(無し) | 一番外側のDIVにつけるCSS |
winDiv.class | sSliderWinDiv | スライドウィンドになるDIVのClass名 |
winDiv.css | { overflow: 'hidden', 'position': 'absolute', 'z-index': 100 } |
スライドウィンドになるDIVのCss |
li.css | { 'position': 'absolute', 'z-index': 50 } |
スライどliのCss |
btslg | sSliderBt_ | スライダー指定ボタンのクラス名の共通部分 |
btOnClass | sSliderOn | カレントのスライダー指定ボタンにつけるクラス |
sleepTime | 3000 | 移動終了から次に移動開始するまでの時間 |
moveTime | 1000 | 移動開始から終了までの時間 |
endMove | function() {} | 移動が終了した時に実行する関数 |
endInt | function(){} | 画面の読み込みが終了して準備が出来た時に実行する関数 |
オプションの設定の仕方
var option = { wrapDiv:{ class:'sSliderWinDiv', css:{ overflow: 'hidden', position: 'absolute', z-index: 100 } } } $('#slider').sSlider(option);
その他の使い方
移動開始前になんか関数を走らせる。
var option = { endInt:function(){ alert('end'); } } $('#slider').sSlider(option);
移動の準備が整った時点でアラートを表示する。
移動終了後になんか関数を走らせる。
var option = { endMove:function(){ alert('end'); } } $('#slider').sSlider(option);
スライドが完了した後にアワートを表示する。
今後考えている事
- オプションで縦スクロールでも対応できる。
- オプションで画面いっぱいのスクロールを実装できる。
以上、使えたらいいな~