jQueryで簡単にクロスフェードのスライドショーを作る


  • 公開:
  • 更新:
  • 編集:
概要 ▶ jQueryで簡単・シンプルにクロスフェード型のスライドショーが作れないかな?と思って探したら「A Simple jQuery Slideshow | Jon Raasch's Blog」というスクリプトが公開されていました。※クロスフェードというのは今表示している画像が段々薄くなっていくと同時に、次の画像が段々濃くなってくるタイプのエフェクト。今回はこちらのスクリプトを紹介します。実は
jQueryで簡単・シンプルにクロスフェード型のスライドショーが作れないかな?と思って探したら「A Simple jQuery Slideshow | Jon Raasch's Blog」というスクリプトが公開されていました。

※クロスフェードというのは今表示している画像が段々薄くなっていくと同時に、次の画像が段々濃くなってくるタイプのエフェクト。


今回はこちらのスクリプトを紹介します。

実は以前書いた「jQueryで簡単な画像のスライドショー《slideswitchを勝手に解説》」でも紹介しているのですが、このスクリプトのままだと、画像にリンクを張った場合に動作しなくなるので、それを修正したものを紹介いたします。

このブログのアクセスログを見ると、検索で「jQuery 簡単 スライドショー」とかで結構来ているみたいなので。


今回のスクリプトを動かしたデモは↓のようになります。(スマートフォン版ページだと動作しません)

Sea Otter preening itself in Morro Bay, CA  sea-otter-morro-bay_13 Sun Sun Down Sun Rise over Sydney Sea

元のスライドショーのスクリプト

A Simple jQuery Slideshow | Jon Raasch's Blog」で紹介されている元のスクリプトは以下の通りです。
<script>
function slideSwitch() {
	var $active = $('#slideshow IMG.active');

	if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

	var $next =  $active.next().length ? $active.next()
		: $('#slideshow IMG:first');

	$active.addClass('last-active');
		
	$next.css({opacity: 0.0})
		.addClass('active')
		.animate({opacity: 1.0}, 1000, function() {
			$active.removeClass('active last-active');
		});
}

$(function() {
	setInterval( "slideSwitch()", 5000 );
});
</script>

詳しい解説は「jQueryで簡単な画像のスライドショー《slideswitchを勝手に解説》」を見て欲しいのですが、このスクリプトでは次の画像を指定するときに「$active.next()」で同じ階層の次の要素を指定しています。

なので
<img src="●●">
<img src="●●">
<img src="●●">
の時にはOKなのですが
<a href="▲▲">
	<img src="●●">
</a>
<a href="▲▲">
	<img src="●●">
</a>
<a href="▲▲">
	<img src="●●">
</a>

となっていると、<a>の要素の中に<img>要素があるため、<img>の同じ階層の次の要素はありません。このためスライドショーのスクリプトが正常に動作しません。



スクリプトの修正ポイント

同じ階層にはないので単純に.next()で指定できないだけなので、その部分の指定方法を変えます。

$active.parent().next().find("img")

とします。

「.parent()」にて<img>から一度上の階層に上がって、「.next()」にて次の要素(<a>)に移動して、「.find("img")」にてその中にある<img>要素を探します。

かなり決め撃ちですが、先ほどの
<a href="▲▲">
	<img src="●●">
</a>
<a href="▲▲">
	<img src="●●">
</a>
<a href="▲▲">
	<img src="●●">
</a>
といった構造であれば、これで十分です。



できあがったスクリプト・HTML・CSS

修正を加えたスクリプトは以下の通りです。
<head>内に書き込んで下さい。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
	window.jQuery || document.write('<script src="/js/jquery-1.7.2.min.js"><\/script>')
</script>

<script>
	function slideSwitch(i,etime) {
		var $active = jQuery(i+' img.active');
		if ( $active.length == 0 ) $active = jQuery(i+' img:last');
		var $next = $active.parent().next().find("img").length ? $active.parent().next().find("img") : $(i+' img:first');
		$active.addClass('last-active');
		$next.css({opacity: 0.0})
		.addClass('active')
		.animate({opacity: 1.0}, etime, function() {
		$active.removeClass('active last-active');
		});
	}


	jQuery(document).ready(function() {
		setInterval( "slideSwitch('#slideshow',2000)", 7000 );
	});
</script>

他にも多少変更して、同じページにスライドショーが複数あっても、slideSwitchの引数で要素を指定できたり、スライドが切り替わるタイミングを指定できたりするようにしてあります。


スライドショー部分のHTMLは以下の通り。
<div id="slideshow">
<a href="リンク先1"><img src="画像1" alt="" class="active" /></a>
<a href="リンク先2"><img src="画像2" alt="" /></a>
<a href="リンク先3"><img src="画像3" alt="" /></a>
</div>


CSSは以下の通り。
#slideshow {
	position:relative;
	width:500px;
	height:320px;
}
#slideshow img {
	position:absolute;
	top:0;
	left:0;
	z-index:8;
}
#slideshow img.active {
	z-index:10;
}
#slideshow img.last-active {
	z-index:9;
}
※CSSは今回ページで使用しているものは画像のサイズが違ったりするので少しだけ変えてあります。



今回のスライドショーのスクリプトを実装しているページの紹介

完全に宣伝ですが、会社のトップページがそうなっています。
20121006-jQueryで簡単スライドショー-01

このページには現在(2012/10/06)2つのスライドショーがあります。
それをひとつのスクリプトで動かすために、引数部分を工夫しました。(要素の指定と画像が切り替わるタイミング)

よろしければご確認下さい。



それでは。


追記(2012/10/06)

スクリプト掲載元のページにある「A Simple jQuery Slideshow - FAQs」のページをよく見たら、「リンクがある場合はどうしたらいいんだい?」的なFAQがあったわ(苦笑)。回答としてはimgタグではなくaタグを操作しましょうってことらしいね。それでもいいか、確かに。
カテゴリー:

このページをぜひシェアしてください