JavaScript

画像クロスフェード切替えの無限ループ実装方法【jQuery】

  /

この記事では、jQueryのappendTo、attr、load、remove、fadeOut、fadeIn、setTimeoutを使って画像をクロスフェードで切り替える方法をご紹介します。
この方法は、シンプルかつ効果的に画像をスライドショー形式で表示したい場合に役立ちます。以下に示すコードを使用することで、簡単に無限ループする画像のクロスフェード切替えを実装できます。

Contents

必要なファイル読み込みとJavaScriptの記述

まず、jquery.js（v1.4.2）ファイルを読み込みます。ここでは、バージョン1.4.2を使用していますが、最新バージョンを使用しても問題ありません。
また、画像のパスやリンク、alt属性を設定する必要があります。画像枚数、切替時間、リンクを設定します。画像切替えエリア（#idMainimg01）に対してappendTo、attr、load、remove、fadeOut、fadeInをfor文で繰り返し処理して画像の切替を行います。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
	loopanime_start();
});
	
function loopanime_start(){
	var timerId;
	var imgNo = 8;				//画像枚数
	var currentNo = 0;
	var targetNo = 0;
	var fspeeds=1000;			//切り替え時間
	
	//画像にリンクを指定
	var links = [
		"https://dad-union.com/",
		"https://dad-union.com/",
		"https://dad-union.com/",
		"https://dad-union.com/",
		"https://dad-union.com/",
		"https://dad-union.com/",
		"https://dad-union.com/",
		"https://dad-union.com/"
		];
	//画像のalt
	var alts = [
		"画像クロスフェード切替りを無限ループするJs1",
		"画像クロスフェード切替りを無限ループするJs2",
		"画像クロスフェード切替りを無限ループするJs3",
		"画像クロスフェード切替りを無限ループするJs4",
		"画像クロスフェード切替りを無限ループするJs5",
		"画像クロスフェード切替りを無限ループするJs6",
		"画像クロスフェード切替りを無限ループするJs7",
		"画像クロスフェード切替りを無限ループするJs8"
	];
	
	(function(){
		for(var i=1; i<=imgNo; i++){
			$('<div id="rImg'+i+'">').appendTo($('#idMainimg01'));

			var img = $('<img>').attr('src','images/i0'+i+'.jpg');//画像パスとファイル名指定
			img.attr('alt',alts[i-1]);
			img.load(imgLoaded.call(img, i));
		}
	})();
	
	function imgLoaded(no){
		var obj = $('#rImg'+no);
		obj.children('img').remove();
		obj.append($(this));
		$('<a href="'+links[no-1]+'" />').append(this).appendTo(obj);
		
		if(no==1) loop();
	}
	
	function loop(){
		if(currentNo!=0) $('#rImg'+currentNo).fadeOut(fspeeds);
		
		if(targetNo==0) currentNo = ++currentNo>imgNo?1:currentNo;
		else currentNo = targetNo;
		targetNo = 0;
		
		$('#rImg'+currentNo).fadeIn(fspeeds);
		timerId = setTimeout(loop, 6000)
	}
}
</script>

CSSの設定

画像切替えエリア（#idMainimg01）のCSS記述があるbase.cssファイルを読み込んでます。base.cssの内容は以下の通りです。

h1{
	font-size:12px;
	font-weight:normal;
	text-align:center;
	padding-bottom:30px;
}
#idMainimg01 {
	position:relative;
	width:179px;
	height:200px;
	text-align:center;
	z-index:2;
	margin:0 auto;
}
#idMainimg01 div {
	display:none;
	position:absolute;
	left:0;
	top:0;
}

HTMLの設定

次に、画像を表示するためのHTMLを設定します。画像切替えエリア（id=”idMainimg01″）の記述です。
以下のコードを参考にしてください。

<h1>画像クロスフェード切替りを無限ループするJsのデモページ</h1>

<div id="idMainimg01"><noscript><img src="images/i01.jpg" alt="画像クロスフェード切替りを無限ループするJs" width="180" height="200"></noscript></div>
</div>

用意する画像ファイル名の命名規則

使用する画像ファイルは、以下のように命名する必要があります。

画像ファイル名は
images/i01.jpg
images/i02.jpg
～
images/i08.jpg
の様に画像数分数値にしました。

画像クロスフェード切替りを無限ループするJsのデモページ

上記のJavaScript、CSS、HTMLを使用して、実際のデモページを作成することができます。以下のリンクからデモページを確認できます。

画像クロスフェード切替りを無限ループするJsのデモ

このデモページでは、画像がクロスフェードで無限ループする様子を確認できます。

まとめ

この記事では、jQueryを使用して画像をクロスフェードで切り替える方法について説明しました。シンプルなコードで実装できるので、ぜひ自分のプロジェクトに取り入れてみてください。また、必要に応じてカスタマイズして、より自分のニーズに合った形に仕上げることも可能です。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

画像切替 クロスフェード crossfade setTimeout
RELATED POST