How to Create an Infinite Loop Crossfade Image Switch [jQuery]

Introducing how to use jQuery’s appendTo, attr, load, remove, fadeOut, fadeIn, and setTimeout to create an infinite loop crossfade image switch.

JavaScript code for infinite loop crossfade image switch with jQuery

※ Load the jquery.js (v1.4.2) file. Set the number of images, switching time, and links. Use appendTo, attr, load, remove, fadeOut, and fadeIn on the image switching area (#idMainimg01) to perform image switching in a for loop.

<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;				//Number of images
	var currentNo = 0;
	var targetNo = 0;
	var fspeeds=1000;			//Switching time
	
	//画像にリンクを指定
	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 = [
		"Infinite loop crossfade image switch Js1",
		"Infinite loop crossfade image switch Js2",
		"Infinite loop crossfade image switch Js3",
		"Infinite loop crossfade image switch Js4",
		"Infinite loop crossfade image switch Js5",
		"Infinite loop crossfade image switch Js6",
		"Infinite loop crossfade image switch Js7",
		"Infinite loop crossfade image switch Js8"
	];
	
	(function(){
		for(var i=1; i<=imgNo; i++){
			$('<div id="rImg'+i+'">').appendTo($('#idMainimg01'));

			var img = $('<img>').attr('src','images/i0'+i+'.jpg');//Specify image path and file name
			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 code for infinite loop crossfade image switch

※ Load the base.css file. This is the CSS code for the image switching area (#idMainimg01). Modify as needed.

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 code for infinite loop crossfade image switch

※ This is the code for the image switching area (id=”idMainimg01″).

<h1>Demo page for infinite loop crossfade image switch Js</h1>

<div id="idMainimg01"><noscript><img src="images/i01.jpg" alt="Infinite loop crossfade image switch Js" width="180" height="200"></noscript></div>
</div>

Supplement: Naming convention for prepared image files

For the image file names,
images/i01.jpg
images/i02.jpg
～
images/i08.jpg
you need to number them according to the number of images.

Demo page for infinite loop crossfade image switch Js

Demo for infinite loop crossfade image switch Js
Various adjustments and customizations have been made to the above JavaScript code.

　
※ If you reuse it, please do so at your own risk.
Do not reuse the Google Analytics tag inside the demo page tags.