jQueryで『クロスフェードビュアー作ってやんよ!!!』

今さら感がハンパないが、jQueryで画像の枚数や表示速度等が簡単に操作できるビュアーが欲しかったので作成

1.HTMLの記述

<div id="viewer">
<img src="01.jpg" alt="" width="500" height="200" />
<img src="02.jpg" alt="" width="500" height="200" />
<img src="03.jpg" alt="" width="500" height="200" />
</div>

ＩＤ"viewer"内に画像を置く。

2.CSSの記述

#viewer {
	margin: 0 auto;
	width: 100%;
	text-align: left;
	overflow: hidden;
	position: relative;
}

#viewer img {
	top: 0;
	left: 0;
	width: 100%;
	position: absolute;
}

ID"viwer"の領域を指定したい場合は幅と高さに任意の値を指定すれば良い。

3.jsの記述

$(function(){
	var setImg = '#viewer';
	var fadeSpeed = 1500;	/*	フェード速度	*/
	var switchDelay = 2000;	/*　切り替え速度	*/

	var imgHeight = $(setImg + ' img').height();
	$(setImg).css({height:(imgHeight)});

	$(window).bind('load resize',function(){
		var imgHeight = $(setImg + ' img').height();
		$(setImg).css({height:(imgHeight)});
	})

	$(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);
});

変数fadeSpeedは画像が切り替わる際のフェード速度。 変数switchDelayは次の画像に切り替わるまでの速度。 各数値を"アナタらしい"数字に設定していけば良い…。 で、こうなる。