sacnoha's Stories

jQueryとjQuery TOOLSを使った横スクロールするスライドショーの作り方

NO IMAGE

jQuery TOOLS

というーわけで、先日、jQueryとjQuery TOOLSを使って横スライドのスライドショーを作る機会があったので挑戦してみました。
以前、jQuery TOOLSで作るマウスカーソルでスライドするスライドショー作ったので、らくらくできるかなーと思ってやってみたんですが、なかなか難しかった。。。

まずはサンプルページがこちら

それでは必要なファイルを揃えるとこからスタートよー。

必要なファイル

jquery.jsはGoogleでホスティングされてるのを使うのも手です。⇒GoogleにホスティングされているjQuery等の便利JSタグを一瞬でコピーできる便利サイト「ScriptSrc.net」

jquery.tools.jsはダウンロード画面で必要な機能に絞ってダウンロードできるみたい(便利だ!
なので、今回は以下のような設定で行きます。
あ、なんかjQueryも含められるみたいなので、jquery.toolsだけ使うならこれを使ってもいいかもしれません。
(サンプルではGoogleからjquery.jsを読み込んでます。)

jQuery TOOLSのダウンロード設定

ファイルを設置

ファイルの設置はお好みで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>内に書いたものをスライドできるのであれこれ使えそうです。