画像がフェードイン、フェードアウトごとに配置を変えてローテーションするjQuery

画像イメージが大きさや配置を変えながらローテーションしていくjQueryのスクリプトを書いてみた。

説明がわかりづらいと思うのでデモサイトをご覧ください。

HTMLは下記のように。
わざわざ画像にfirst、second、thirdと順番にクラスをふってる。
小さく表示させる画像にはmini-photoのクラスが。

<!DOCTYPE HTML>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Image Rotation Demo</title>
	<link rel="stylesheet" href="style.css">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script type="text/javascript" src="script.js"></script>
</head>
<body>
	<div id="container">
		<div class="rotation">
			<img src="images/rotation1.gif" alt="" class="third"/>
			<img src="images/rotation2.gif" alt="" class="mini-photo first" />
			<img src="images/rotation3.gif" alt="" class="mini-photo second" />
		</div>
	</div>
</body>
</html>

CSSは下記のように。
first、second、thirdそれぞれにabsoluteで配置を決めている。
うーん、めんどくさい。

.rotation{
	width:500px;
	height: 180px;
	position: relative;
}
.mini-photo {
	width: 165px;
	height: 90px;
}
.first {
	position: absolute;
	top:0px;
	left: 330px;
}
.second {
	position: absolute;
	top: 90px;
	left:330px;
}
.third {
	position: absolute;
	top: 0px;
	left:0px;
}

で、javascriptファイルだけど、とりあえずひとつひとつの動作を追ってそのまま書いてる感じ。

$(function(){
	var interval = 4000;
	var delaySpeed = 500;
	$('.rotation').each(function(){
		var container = $(this);
		function switchImg(){
			var imgs = container.find('img');
			var first = imgs.eq(0);
			var second = imgs.eq(1);
			var third = imgs.eq(2);
			second.fadeOut(delaySpeed,function(){
				third.fadeOut(delaySpeed,function(){
					first.fadeOut(delaySpeed,function(){
						first.addClass('first mini-photo').removeClass('third');;
						second.addClass('second').removeClass('first');
						third.prependTo(container).addClass('third').removeClass('second mini-photo');
						imgs.each(function(i){
							$(this).delay(i*(delaySpeed)).fadeIn();
						});
					});
				});
			});
		}
		setInterval(switchImg, interval);
	});
});

全体的なローテーションの間隔はintervalで指定。各画像のフェードイン、フェードアウトのずれはdelaySpeedで指定している。

でも画像に変更があったときなんかは全てのファイルを修正しなきゃだからメンテナンスもめんどくさいし、これどう考えても冗長だよなー。。。

もっとスマートなやり方ができる人がいたら教えてほしいです。。。