うつつのがれ

5分で作るjQueryスライドショー

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