jQueryで画像切替後に、テキストを時間差でスライド表示

「FLORABeautyオンラインカレッジ」の制作に携わった際に使用したスライドショウの実装方法をメモ。
スライドショウを単調に見せないだけでなく、文字を表示するタイミングを画像と変えることで、自然と文字へと誘導可能。

HTML

<div id="mainimage">
<ul>
<li id="topimage01" class="active">
<div class="inner">
<h2>キャッチコピーを記載しています。</h2>
<p>キャッチコピーに対しての簡易説明を記載しています。</p>
</div>
</li>
<li id="topimage02">
<div class="inner">
<h2>キャッチコピーを記載しています。</h2>
<p>キャッチコピーに対しての簡易説明を記載しています。</p>
</div>
</li>
<li id="topimage03">
<div class="inner">
<h2>キャッチコピーを記載しています。</h2>
<p>キャッチコピーに対しての簡易説明を記載しています。</p>
</div>
</li>
</ul>
</div>

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

CSS

#mainimage{
	height: 80vh;
	margin: 0 0 10px;
	position: relative;
	overflow: hidden; }
#mainimage:before{
	background: #212121;
	content: "";
	width: 100%;
	height: 80vh;
	display: block;
	position: absolute;
	left: 0;
	bottom: 60px; }
#mainimage ul li{
	width: 80%;
	height: 80vh;
	right: 0;
	position: absolute; }
#mainimage ul li.active{
	z-index:9; }
#mainimage ul li.last-active{
	z-index:8; }
#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 ul li .inner{
	position: absolute;
	top: 60px;
	left: -20%;
	opacity: 0; }
#mainimage ul li:first-of-type .inner{
	opacity: 1; }

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.find('.inner').animate({'opacity':'0', 'left':'-30%'}, 750, function(){
		$active.addClass('last-active');
		$next.css({'opacity':'0'})
		.addClass('active')
		.animate({'opacity':'1.0'}, 3000, function(){
			$next.find('.inner').css({'left':'-20%'}).animate({'opacity':'1.0'}, 750, function(){
				$active.removeClass('active last-active');
			});
		});
	});	
};

• 美容・痩身の通信講座のFLORABeautyオンラインカレッジ