jQueryの勉強のために昔作ったスライダーです。
そのころはまだレスポンシブとかあまりなかったので、デスクトップ表示しかありません。
スライドのパターン
よく使う配布されているスライダーを見ると画像の動き方が何種類かあるので、今回は6種類作ってみました。
デモ
HTML
<divid="slide01"><ul><li><ahref="#"><imgsrc="img/img01.gif"width="700"height="426"alt=""></a></li><li><ahref="#"><imgsrc="img/img02.gif"width="700"height="426"alt=""></a></li><li><ahref="#"><imgsrc="img/img03.gif"width="700"height="426"alt=""></a></li><li><ahref="#"><imgsrc="img/img04.gif"width="700"height="426"alt=""></a></li><li><ahref="#"><imgsrc="img/img05.gif"width="700"height="426"alt=""></a></li></ul></div>CSS
デモからスライドに関係する箇所
.sliders{position:relative;}.slidersli{overflow:hidden;list-style-type:none;}.slidersliaimg{border:0;}.pager{padding:10px0;text-align:center;}.pagerli{display:inline-block;*display:inline!important;list-style-type:none;zoom:1;}.pagera{margin:05px;display:block;width:10px;height:10px;background:url(img/pager_off.png)no-repeatlefttop;text-decoration:none;text-indent:-9999px;outline:none;}.pagera:hover,.pager.currenta{color:red;text-decoration:none;background:url(img/pager_on.png)no-repeatlefttop;}.prev{margin-top:-25px;margin-left:-450px;width:50px;height:50px;position:absolute;top:50%;left:50%;background:url(img/prev_off.png)no-repeatlefttop;text-indent:-9999px;z-index:50;cursor:pointer;}.prev:hover{background-image:url(img/prev_on.png);}.next{margin-top:-25px;margin-left:400px;width:50px;height:50px;position:absolute;top:50%;left:50%;background:url(img/next_off.png)no-repeatlefttop;text-indent:-9999px;z-index:50;cursor:pointer;}.next:hover{background-image:url(img/next_on.png);}JavaScript
$(function(){$("#slide01").sliders();});オプション
スライドの種類等ｊはオプションで設定できます。
$(function(){$("#slide01").sliders({slideType:'selectAnimation',changeTime:1500,showTime:3000,allTime:15000,animeType:'linear'});});- slideType
スライドのタイプ。以下から選んで下さい。
- fadeSlide フェードイン
- leftSlide 左にスライド（終わりまで行くと左へ戻る）デフォルト
- leftSlideLoop 左にスライド（ループ）
- leftSlideAnimation 常に左にスライド（ループ）
- selectAnimation 左にスライド（前へ次への選択ボタンあり）
- moveOn 現在表示されているものの上に右からスライド
- changeTime 次のスライドまでの移動秒数。デフォルトは1500
- showTime 表示秒数デフォルトは3000
- allTime leftSlideAnimation用・常に左にスライド（ループ）専用の全体にかかる秒数。デフォルトは15000。
- animeType アニメーションタイプ。デフォルトはswing。jquery.easing.jsを読みこめばそちらの値も使えます。
スライダーはbxSliderなど配布されていたものを使っていたのですが、やはり自作できるといろいろ改造もできて楽しいです。