jQueryスライドショー(スライダー)は探せばいくらでも素敵なものがたくさん公開されていますが、シンプルなものであれば、探すより作った方が早かったりします。
種類が多すぎて、自分の欲しい機能を探すのは結構大変ですし、多機能なものは単純なスライドショーには冗長すぎでもあります。
そういうわけで、とっても簡単なjQueryスライドショーの作り方をご紹介します。タイトル通り5分くらいでササッと作ってみましょう。
なお、HTMLの最低限の知識は必要です。
方針
5分で作るので、多彩な機能を持ったものは作りません。次のような方針でいきます。
- 画像のサイズは全て同じで固定。
- 画像の切り替わりはフェードイン・アウト。
- アニメーションはCSSで。
- オートアニメーションのみで、次へボタンなどのコントロール機能はなし。
- サムネイルもなし。
- IE? 知らない子ですね。
横滑りするスライダーは幅計算など色々面倒なので、フェードで切り替わるだけの単純なスライドショーです。
フェードはCSSのopacity
とtransition
を利用するので、古いブラウザ(特にIE)ではフェードせずただ画像が切り替わるだけです。
作成
方針が決まったので、早速作ります。あらかじめ、縦横サイズが同じ画像を3枚ほど用意しておいてください。
まずHTMLを組みます。
<div id="slideshow" class="slideshow">
<img src="img01.jpg" alt="">
<img src="img02.jpg" alt="">
<img src="img03.jpg" alt="">
...
</div>
これだけです。とてもシンプル。
次にCSSです。
.slideshow {
position: relative;
width: 640px; /* 画像の横幅 */
height: 480px; /* 画像の縦幅 */
}
.slideshow img {
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: 1s; /* フェードの時間(秒) */
}
.slideshow .show {
opacity: 1;
z-index: 1;
}
画像をabsolute
で絶対配置することで一箇所に重ねて、あとはshow
クラスの付け外しでopacity
の値を切り替えられるようにしています。
transition
の値を書き換えることで、フェードのスピードなどを変更できます。
HTMLとCSSが用意できたので、あとはjQueryのコードを書くだけです。
その前にjQueryを読み込みまないと話になりません。jQueryのファイルをダウンロードしてきてもいいですが、手っ取り早くCDNで読み込みます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
IE8などを無視するなら、jQuery2.x系の方がいいでしょう。
さあ、全ての準備ができたでの、コードを書きましょう。
$(window).load(function() {
var img = $("#slideshow").children("img"), // 画像を取得
num = img.length, // 画像の数を数える
count = 0, // 現在何枚目を表示しているかのカウンター
interval = 5000; // 次の画像に切り替わるまでの時間(1/1000秒)
img.eq(0).addClass("show"); // 最初の画像にshowクラス付与
setTimeout(slide, interval); // slide関数をタイマーセット
function slide() {
img.eq(count).removeClass("show"); // 現在表示している画像からshowクラスを取り除く
count++; // カウンターを一個進める
if(count >= num) {
count = 0; // カウンターが画像の数より大きければリセット
}
img.eq(count).addClass("show"); // 次の画像にshowクラス付与
setTimeout(slide, interval); // 再びタイマーセット
}
});
できました! interval
の値を変えることで、スライドの間隔を変更できます。
やっていることは単純で、時間がきたら画像のクラスを付け外ししているだけです。これで画像の透明度を変更して、表示非表示を切り替えているのです。
実のところ、このくらいの処理ならjQueryを使わなくても簡単に作れるのですが、目に見えて動きがわかるのでjQueryの入門用としては良いのではないでしょうか。
自分で作れるようになれば、改造も簡単にできますしね。
Comments