shie2’s diary

仕事とかエフェクターとかもろもろのために

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);

スライドが完了した後にアワートを表示する。


 今後考えている事

  • オプションで縦スクロールでも対応できる。
  • オプションで画面いっぱいのスクロールを実装できる。



以上、使えたらいいな~