画像切替えをクロスフェードで無限ループする方法【jQuery】｜DAD UNION

jQueryのappendTo、attr、load、remove、fadeOut、fadeIn、setTimeoutを使って画像切替えをクロスフェードで無限ループする方法をご紹介します。

Contents

jQueryで画像切替えをクロスフェードで無限ループするJavaScriptの記述
画像切替えをクロスフェードで無限ループするcssの記述
画像切替えをクロスフェードで無限ループするHTMLの記述
- 補足：用意する画像ファイル名の命名規則
画像クロスフェード切替りを無限ループするJsのデモページ

jQueryで画像切替えをクロスフェードで無限ループするJavaScriptの記述

※jquery.js（v1.4.2）ファイルを読み込みます。画像枚数、切替時間、リンクを設定します。画像切替えエリア（#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の記述

※base.cssファイルを読み込みます。画像切替えエリア（#idMainimg01）の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の記述

※画像切替えエリア（id=”idMainimg01″）の記述です。

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

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