jQueryで画像を自動で切り替えてみる。

よくWebサイトのヘッダーなんかで使われてる、自動で画像を切り替えてるやつを実装してみた。

最初ぐぐって出てきたスクリプトそのまま使ってたのだが、要件に満たさないところがあったのでごっそり書き換えたので良いだろうということで書いておく事にした。

何をやっているかというと、同じ場所に切り替えたい画像を全部重ねて置いておき、JavaScript の setTimeout を使用して順番に表示している。

今回は画像が4枚を3秒毎に表示していき、最後の画像だけ10秒ほど表示としている。あまりこういった細かな制御ができるプラグインは無いのかな、すぐ出て来なかったので既存のものを改造した。その既存のものがどこからとってきたものなのか忘れてしまった...。見つかったらリンクはろう。

html

<header>
	<h1>画像が自動で切り替わるアレ</h1>
	<ul id="header-images">
		<li><img src="/images/image_top_01.jpg"></li>
		<li><img src="/images/image_top_02.jpg"></li>
		<li><img src="/images/image_top_03.jpg"></li>
		<li><img src="/images/image_top_04.jpg"></li>
	</ul>
</header>

css

header ul#header-images {
	width: 970px;
	height: 241px;
	overflow: hidden;
	position: relative;
	list-style: none;
}
header ul#header-images li {
	position: absolute;
}

javascript

$(document).ready(function() {
	$.fn.autoChanger = function() {
		var timeout = 3000;
		var speed = 1000;
		var element = $(this).children();
		var length = $(this).children().length;
		var current = 0;
		var next = 1;
		$(element).hide();
		$(element[0]).show();
		var change = function(){
			$(element[current]).fadeOut(speed);
			$(element[next]).fadeIn(speed);
			if ((next + 1) < element.length) {
				current = next;
				next++;
				timeout = 3000;
			} else {
				current = element.length - 1;
				next = 0;
				timeout = 10000;
			}
			timer = setTimeout(function() { change(); }, timeout);
		};
		var timer = setTimeout(function() { change(); }, timeout);
	}
	$(function() {
		$('#header-images').autoChanger();
	});
});