Image Rotation with new transition and dissolving effect

[JavaScriptBank]

This image rotation system creates a dissolving effect for the transition phase. Great for banners, picture-presentations and... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Image Rotation with new transition and dissolving effect
​

How to setup

Step 1: Place CSS below in your HEAD section
CSS

<STYLE>
.spanstyle {
	LEFT: 0px; POSITION: absolute; width: 100%; text-align: center;
}
</STYLE>

Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript

<SCRIPT>
<!-- Beginning of JavaScript -
// CONFIGURATION:
// 1. 	Copy the two script-blocks:
// 		Paste the first script-block inside the head-section of your HTML-file.
//		Insert the second script-block into the body-section.
// 2. 	Copy the style-block and paste it into the head-section of your HTML-file.
// 3.	Put your images into the same directory as the HTML-file.
//		You may add as many images as you like.
// 4. 	Insert 'onLoad="checkbrowser()"' into the body-tag.
// 5. 	Configure the variables below:
		
// The width of your images (pixels)
var imgwidth=800

// The height of your images (pixels)
var imgheight=250

// The name of your images. You may add as many images as you like.
var imgname=new Array()
imgname[0]="logojs.gif"
imgname[1]="photo1.jpg"
imgname[2]="photo2.jpg"
imgname[3]="photo3.jpg"

// This block will preload your images. Do not edit this block.
var imgpreload=new Array()
for (i=0;i<=imgname.length-1;i++) {
	imgpreload[i]=new Image()
	imgpreload[i].src=imgname[i]
}

// Where should those images be linked to? 
// Add an URL for each image.
// If you don't want to add an URL just write '#' instead of 
// the URL, see sample imgurl[2].
var imgurl=new Array()
imgurl[0]="http://javascriptbank.com"
imgurl[1]="http://www.javascriptbank.com"
imgurl[2]="http://javascriptbank.com"
imgurl[3]="http://www.javascriptbank.com"

// Final horizontal position of the image: distance to the left margin of the window
var x_finalpos=30

// Final vertical position of the image: distance to the top margin of the window
var y_finalpos=30

// Number of sliced cells (the higher this number the slower the visual effect)
var x_slices=10

// Number of sliced rows (the higher this number the slower the visual effect)
var y_slices=8

// Standstill between the images (microseconds)
var pause=2500

// Do not change the variables below
var xy_slices=x_slices*y_slices
var randomorder=new Array()
for (i=0;i<=xy_slices-1;i++) {
	randomorder[i]=i
}

var speed=20
var i_images=0
var width_slice=Math.floor(imgwidth/x_slices)
var height_slice=Math.floor(imgheight/y_slices)

var cliptop=0
var clipbottom=height_slice
var clipleft=0
var clipright=width_slice
var spancounter=0
var x_random=new Array()
var y_random=new Array()
var max_explsteps=15
var i_explsteps=0

function checkbrowser() {
	if (document.all) {
        initiate()
    }
    if (document.layers) {
        rotatenetscape()
    }
}

function initiate() {
    if (document.all) {
        spancounter=0
 	    for (i=0;i<=y_slices-1;i++) {
			for (ii=0;ii<=x_slices-1;ii++) {
				var thisspan=eval("document.all.span"+spancounter+".style")
				thisspan.posLeft=x_finalpos
				thisspan.posTop=y_finalpos
                thisspan.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
				clipleft+=width_slice
		        clipright+=width_slice
		        spancounter++
			}
        	clipleft=0
	        clipright=width_slice
	        cliptop+=height_slice
	        clipbottom+=height_slice
		}	
		for (i=0;i<=xy_slices-1;i++) {
			var thisspan=eval("span"+i)
			thisspan.innerHTML="<a href='"+imgurl[i_images]+"'><img src='"+imgname[i_images]+"' border='0'></a>"
		}
		var timer=setTimeout("changeimage()",pause)
   }
}

function dissolveimg() {
	if (i_loop<=xy_slices-1) {
		var thisspan=eval("span"+randomorder[i_loop])
		thisspan.innerHTML="<a href='"+imgurl[i_images]+"'><img src='"+imgname[i_images]+"' border='0'></a>"
		i_loop++
		var timer=setTimeout("dissolveimg()",speed)
	}
	else {
		clearTimeout(timer)	
		var timer=setTimeout("changeimage()",pause)
	}
}

function changeimage() {
	getrandomorder(xy_slices)
	i_loop=0
	i_images++
	if (i_images>=imgname.length) {i_images=0}
   	dissolveimg()
}

function getrandomorder(range) {		
	for (i=0;i<=range;i++) {
		var firstvalue= Math.floor(range*Math.random())
		var secondvalue= Math.floor(range*Math.random())
		var cachevalue=randomorder[firstvalue]
		randomorder[firstvalue]=randomorder[secondvalue]
		randomorder[secondvalue]=cachevalue
	}
}

function rotatenetscape() {
	document.imgcontainer1.document.write("<a href='"+imgurl[i_images]+"'><img src='"+imgname[i_images]+"' border='0'></a>")	
	document.imgcontainer1.document.close()	
	i_images++
	if (i_images>imgname.length-1) {i_images=0}
   	var timer=setTimeout("rotatenetscape()",pause)
}

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

Step 3: Place HTML below in your BODY section
HTML

<BODY onload=checkbrowser()>
<SCRIPT>
<!-- Beginning of JavaScript -
if (document.all) {
	for (i=0;i<=y_slices-1;i++) {
		for (ii=0;ii<=x_slices-1;ii++) {
    		document.write("<div id='span"+spancounter+"' class='spanstyle'>")
    		document.write("</div>")
			spancounter++
		}
	}
}

if (document.layers) {
	document.write("<div id='imgcontainer1' class='spanstyle'>")
	document.write("</div>")
	document.close()
	document.imgcontainer1.left=x_finalpos
	document.imgcontainer1.top=y_finalpos	
}
// - End of JavaScript - -->
</SCRIPT>
</BODY>

JavaScript Make link open in new tab/window - JavaScript World clock - circumference calculator​