というーわけで、先日、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>内に・・・
[html]<script type=”text/javascript” src=”http://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>[/html]
こんな感じに書きました。
- circular: ture
ループというかを有効にします。
例えば4個スライドがあった場合、4個目の時に次へボタンを押すと、1個目に戻るようになって、ずっとボタン押し放題です。
これを付けない場合は最期まで行くと、次へボタンを押しても何も起こらなくなります。 - autoscroll(3000)
クリックしなくても自動で次のスライドへスクロールします。
3000のところは時間指定でミリ秒単位指定。この場合は3秒ごとに次のスライドへスクロールします。
jQuery TOOLSのscrollable説明ページによると他にもいろいろあるみたいです。
CSSはこんな感じ。
[html].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;
}[/html]
それから、表示するものと次へボタンと前へボタンを書いておきます。
[html]<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 –>[/html]
前へボタンはclass=”prev”、 次へボタンはclass=”next”にします。
そしてできあがりがこちら⇒サンプル
”circular: true”について
circular: trueにすると、CSSの設定によってはロードしたときに最初に表示される画像が、一番最後の画像になってしまうみたいです。（Mac版Chromeなどで確認）
あれこれ試してみた結果、サンプルのソースで言うところの
- <div class=”items”>内の<div>にwidthを指定すること
- <div class=”items”>内の<div>内の<img>にpaddingを指定すること
の2つをやることでちゃんと意図した表示に出来ました。
うーん、これにははまったはまった( ；∀；)
画像だけでなく<div>内に書いたものをスライドできるのであれこれ使えそうです。