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

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を読み込んでます。)

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>内に書いたものをスライドできるのであれこれ使えそうです。

 

jQuery」カテゴリの人気記事

  • jQuery LightBoxプラグイン『prettyPhoto』でURL末尾へハッシュタグ#!prettyPhotoを付加させないようにするメモ 32 views
  • jQuery TOOLS jQueryとjQuery TOOLSを使った横スクロールするスライドショーの作り方 30 views
  • jQueryで配列の値を個別のテキストエリアへ順番に入れていくサンプル 25 views
  • jQueryで作る縦スライドで表示するメニューの作り方 18 views
  • jQuery TOOLS jQuery.toolsで作るマウスカーソルでスライドするスライドショーの作り方 12 views
  • アウトドア&フィッシング ナチュラム

    こちらもどうぞ

  • iTunesで購入した音楽が認証・再生できないときの対処方法
  • セローにフォグランプPIAA MLSE1を付けたのでレビュー
  • Nikonの標準ズームレンズ24-85mmと24-120mmを比較してみる
  • 親指AFするよー D750の親指AF設定方法
  • ハーレーのミッションオイル交換手順