【jQuery】クロスフェード処理で切り替わるシンプルな画像ギャラリー

画像がフェードイン・フェードアウトで切り替わるだけの、シンプルなギャラリーです。
Javascriptがなるべく短くて、設置が簡単にできて、HTMLがすっきりしていて、CSSを書かなくてもいいものが欲しくて作ってみました。

サンプル

こんなんできます。

デモページ

Javascript

jQuery依存なので、まずHTML上でjQueryを読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

そして下のJavascriptを記載します。
プラグイン等は使用しません。

<script type="text/javascript">
$(function(){
	// 設定
	var $width      = 400; // 横幅
	var $height     = 200; // 高さ
	var $interval   = 3000; // 切り替わりの間隔(ミリ秒)
	var $fade_speed = 1000; // フェード処理の早さ(ミリ秒)
	
	$(".fade_img").css({"position":"relative","overflow":"hidden","width":$width,"height":$height});
	$(".fade_img img").hide().css({"position":"absolute","top":0,"left":0});
	$(".fade_img img:first").addClass("active").show();
	setInterval(function(){
		var $active = $(".fade_img img.active");
		var $next = $active.next("img").length?$active.next("img"):$(".fade_img img:first");
		$active.fadeOut($fade_speed).removeClass("active");
		$next.fadeIn($fade_speed).addClass("active");
	},$interval);
});
</script>

HTML

HTMLはClass名fade_imgのdivの中に画像を並べるだけです。

<div class="fade_img">
<img src="img/01.jpg" width="400" height="200" alt="画像01" />
<img src="img/02.jpg" width="400" height="200" alt="画像02" />
<img src="img/03.jpg" width="400" height="200" alt="画像03" />
<img src="img/04.jpg" width="400" height="200" alt="画像04" />
</div>

完成です。
楽チンです。

後で怠けるための、今の努力は惜しみません。