クロスフェードするシンプルなイメージビューアー

サイトトップページでよく見られる、フェードで切り替わるメイン画像を簡単に表示してくれるjQueryの「fade-viewer」、
極々シンプルにフェードを繰り返してくれるだけですが、汎用性が高いので使いやすいです。

1.HTMLを記述

<div id="fade-viewer">
<img src="images/img1.jpg" width="800" height="300" alt="" />
<img src="images/img2.jpg" width="800" height="300" alt="" />
<img src="images/img3.jpg" width="800" height="300" alt="" />
<img src="images/img4.jpg" width="800" height="300" alt="" />
</div><!--/#fade-viewer-->

</div>

ID名「fade-viewer」と名付けたdiv要素の中に<img>タグで4枚画像を並べています。
※ID名は任意です。

2.CSSを記述

#fade-viewer {
	width: 800px;
	height: 300px;
	overflow: hidden;
	position: relative;
}
#fade-viewer img {
	top: 0;
	left: 0;
	position: absolute;
}

#fade-viewer {

width: 800px;

height: 300px;

overflow: hidden;

position: relative;

}

#fade-viewer img {

top: 0;

left: 0;

position: absolute;

}

<img>要素を親要素の<div>に対して「position:absolute;」にします。

3.JavaScriptを記述

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
	var setImg = '#fade-viewer';
	var fadeSpeed = 1500;	//フェードのスピード
	var switchDelay = 5000;	//画像を切り替えるタイミング

	$(setImg).children('img').css({opacity:'0'});
	$(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed);

	setInterval(function(){
		$(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg);
	},switchDelay);
});
</script>

$(function(){

var setImg = '#fade-viewer';

var fadeSpeed = 1500; //フェードのスピード

var switchDelay = 5000; //画像を切り替えるタイミング

$(setImg).children('img').css({opacity:'0'});

$(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed);

setInterval(function(){

$(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg);

},switchDelay);

});

</script>

以上になります。