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

TOPページのメイン画像切替をクロスフェードで無限ループさせる時に使用しました。

1．ヘッダー、JavaScriptの記述

<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>

2．css記述

（以下のcssは調整してみて下さい）

#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;
}

3．HTMLの記述

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

4．補足

画像ファイル名ですが、
images/i01.jpg
images/i02.jpg
～
images/i08.jpg
の様に画像数分数値にする必要があります。

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

上記のJavaScriptの記述を色々と調整・カスタマイズしたりして使用してます。