jQueryでスライドしながらフェードインで画像切り替え

「国際HAN-ZOU整体専門学院」の制作に携わった際に使用したスライドショウの実装方法をメモ。
動きをつけながらのフェードインなので、画像を切り替えるのみよりも印象に残りやすいのと、表示幅の限られた中で、広がりを演出したい時に便利。

HTML

<div id="mainimage">
<ul>
<li id="topimage01" class="active">
<section class="inner">
<h2>テキストコメント</h2>
</section>
</li>
<li id="topimage02">
<section class="inner">
<h2>テキストコメント</h2>
</section>
</li>
<li id="topimage03">
<section class="inner">
<h2>テキストコメント</h2>
</section>
</li>
</ul>
</div>

<script>
$(function(){
	setInterval('slideSwitch()', 5000 );
	//5000は次の画像に切り替わるまでのミリ秒
});
</script>

CSS

#mainimage{
	position: relative;
	overflow: hidden; }
#mainimage ul li.active{
	z-index: 9; }
#mainimage ul li.last-active{
	z-index: 8; }
#mainimage{
	width: 100%;
	position: relative; }
#mainimage ul{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%; }
#mainimage ul li{
	width: 110%;
	position: absolute;
	top: 0;
	right: -10%;
	z-index: 6; }
#mainimage #topimage01{
	background: url(画像URL) center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover; }
#mainimage #topimage02{
	background: url(画像URL) center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover; }
#mainimage #topimage03{
	background: url(画像URL) center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover; }
#mainimage .inner{
	position: absolute;
	left: 30px;
	bottom: 30px;
	z-index: 10; }

jQuery

function slideSwitch(){
	var $active = $('#mainimage ul li.active');
	if($active.length == 0 ) $active = $('#mainimage ul li:last');
	var $next = $active.next().length ? $active.next() : $('#mainimage ul li:first');
	$active.addClass('last-active');
	$next.css({'opacity':'0', 'right':'0'})
	.addClass('active')
	.animate({'opacity':'1.0', 'right':'-10%'}, 3000, function(){
		//(3000は画像が表示されるまでにかかるミリ秒)
		$active.removeClass('active last-active');
	});
};

• 一般社団法人国際整体療法師協会 直轄校 国際HAN-ZOU整体専門学院