« »

Enhancing image presentation on your website with this image rotator plus smooth dynamic motion (fade-in-fade-out). A very great animation effect if you bring to visitor pictures become more living! Page content loads much faster than any gif animation effect. Easy to setup and customize.

Label: DHTML, fading, animation, fade, motion, image rotator, animation effect

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<SCRIPT language=javaScript>
<!-- Beginning of JavaScript -

sandra0 = new Image();
sandra0.src = "photo1.jpg";

sandra1 = new Image();
sandra1.src = "photo2.jpg";

sandra2 = new Image();
sandra2.src = "photo3.jpg";

var i_strngth=1
var i_image=0

var imageurl = new Array()
imageurl[0] ="photo1.jpg"
imageurl[1] ="photo2.jpg"
imageurl[2] ="photo3.jpg"


function showimage() {		
	if(document.all) {
		if (i_strngth <=110) {
			testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";
			i_strngth=i_strngth+10
			var timer=setTimeout("showimage()",100)
		}	
		else {
			clearTimeout(timer)
			var timer=setTimeout("hideimage()",1000)
		}
	}	
	
	if(document.layers) {
			clearTimeout(timer)
			document.testimage.document.write("<img src="+imageurl[i_image]+" border=0>")
			document.close()
			i_image++
			if (i_image >= imageurl.length) {i_image=0}	
			var timer=setTimeout("showimage()",2000)
				
	}	
}


function hideimage() {		
	if (i_strngth >=-10) {
		testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";
		i_strngth=i_strngth-10
		var timer=setTimeout("hideimage()",100)
	}	
	else {
		clearTimeout(timer)
		i_image++
		if (i_image >= imageurl.length) {i_image=0}
		i_strngth=1
		var timer=setTimeout("showimage()",500)	
	}
}


// - End of JavaScript - -->
</SCRIPT>

Copy All x2

<BODY onload=showimage()>
<DIV id=mainbod style="POSITION: relative; VISIBILITY: visible"></DIV>

<DIV id=testimage style="POSITION: relative; VISIBILITY: visible"></DIV>
</BODY>