jQueryとjQuery TOOLSを使った横スクロールするスライドショーの作り方
というーわけで、先日、jQueryとjQuery TOOLSを使って横スライドのスライドショーを作る機会があったので挑戦してみました。
以前、jQuery TOOLSで作るマウスカーソルでスライドするスライドショー作ったので、らくらくできるかなーと思ってやってみたんですが、なかなか難しかった。。。
まずはサンプルページがこちら。
それでは必要なファイルを揃えるとこからスタートよー。
必要なファイル
jquery.jsはGoogleでホスティングされてるのを使うのも手です。⇒GoogleにホスティングされているjQuery等の便利JSタグを一瞬でコピーできる便利サイト「ScriptSrc.net」
jquery.tools.jsはダウンロード画面で必要な機能に絞ってダウンロードできるみたい(便利だ!
なので、今回は以下のような設定で行きます。
あ、なんかjQueryも含められるみたいなので、jquery.toolsだけ使うならこれを使ってもいいかもしれません。
(サンプルではGoogleからjquery.jsを読み込んでます。)
ファイルを設置
ファイルの設置はお好みでOKです。
サンプルはこんな感じにしました。
コードを書いたり
jQuery TOOLSでのコードを参考に。
<head>内に・・・
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.tools.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".scrollable").scrollable({circular: true}).autoscroll(3000); }); </script>
こんな感じに書きました。
- circular: ture
ループというかを有効にします。
例えば4個スライドがあった場合、4個目の時に次へボタンを押すと、1個目に戻るようになって、ずっとボタン押し放題です。
これを付けない場合は最期まで行くと、次へボタンを押しても何も起こらなくなります。 - autoscroll(3000)
クリックしなくても自動で次のスライドへスクロールします。
3000のところは時間指定でミリ秒単位指定。この場合は3秒ごとに次のスライドへスクロールします。
jQuery TOOLSのscrollable説明ページによると他にもいろいろあるみたいです。
CSSはこんな感じ。
.scrollable{ position: relative; overflow: hidden; height: 424px; } .items{ position: absolute; width: 20000em; } .items div{ float: left; width: 640px; } .items div img{ padding: 0 0 1px 0; }
それから、表示するものと次へボタンと前へボタンを書いておきます。
<div class="button"> <a class="prev"><img src="./images/mae.gif" alt="" /></a> <a class="next"><img src="./images/tugi.gif" alt="" /></a> </div><!-- .button --> <div class="scrollable"> <div class="items"> <div><img src="./images/photo1.jpg" alt="" /></div> <div><img src="./images/photo2.jpg" alt="" /></div> <div><img src="./images/photo3.jpg" alt="" /></div> <div><img src="./images/photo4.jpg" alt="" /></div> </div><!-- .items --> </div><!-- .scrollable -->
前へボタンはclass=”prev”、 次へボタンはclass=”next”にします。
そしてできあがりがこちら⇒サンプル
”circular: true”について
circular: trueにすると、CSSの設定によってはロードしたときに最初に表示される画像が、一番最後の画像になってしまうみたいです。(Mac版Chromeなどで確認)
あれこれ試してみた結果、サンプルのソースで言うところの
- <div class=”items”>内の<div>にwidthを指定すること
- <div class=”items”>内の<div>内の<img>にpaddingを指定すること
の2つをやることでちゃんと意図した表示に出来ました。
うーん、これにははまったはまった( ;∀;)
画像だけでなく<div>内に書いたものをスライドできるのであれこれ使えそうです。