Image Rotation with new transition and dissolving effect

JavaScriptBank

Bannato
26 Nov 2009
86
0
0
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


How to setup

Step 1: Place CSS below in your HEAD section
CSS
Codice:
<STYLE>
.spanstyle {
	LEFT: 0px; POSITION: absolute; width: 100%; text-align: center;
}
</STYLE>

Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Codice:
<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
Codice:
<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>






 
Discussioni simili
Autore Titolo Forum Risposte Data
L upload image tramite url e cache PHP 10
max1974 [Javascript] Load Default image Javascript 2
L [HTML] Background-image HTML e CSS 9
S [ASP.Net] [ASP] Upload Image ASP.NET 6
M [HTML] form con multipli input type image HTML e CSS 1
F [PHP] Validare form prenotazione appuntamento tattoo con upload image PHP 0
D [PHP] Upload encrypt image PHP 0
S [HTML] Problemi con Blueimp image gallery su Chrome e Firefox HTML e CSS 2
webmachine [WORDPRESS] OG:IMAGE Facebook per ogni articolo WordPress 12
felino [Image Transform] Errore nella generazione delle immagini croppate PHP 0
xone Form completo Testi + multiple image per inserimento Annunci PHP 0
T Richiamare il click su un input type="image" alla pressione del tasto invio su una text area. PHP 0
B Creare menu a tendina su image map HTML e CSS 1
A Image Overlays Google Maps App Inventor 2 Presentati al Forum 0
gandalf1959 background image sparisce e diventa visibile un testo in un div Javascript 2
gandalf1959 Background image in un div con CSS non funziona HTML e CSS 4
filomeni Smart Image PHP 1
F background image tr chrome HTML e CSS 3
felino [Ajax/Jquery] Z-index su loading-image Ajax 1
M ERROR: the user data image is used by another emulator. Sviluppo app per Android 1
C Image Manipulation Javascript 0
P asp upload image con resize peso senza componenti? Classic ASP 0
zighy JM css3 image effect plugin..chi li conosce,come si usano? HTML e CSS 6
D Free image gallery per wordpress WordPress 4
andre9004 Jquery background-image fade (Effetto comparsa background-image) jQuery 8
Web Designer Tutorial Photoshop Effetto pioggia: da Photoshop a Image Ready Photoshop 1
J Best Ways to Preload Image JavaScript with CSS, AJAX Javascript 0
J Double fading Image Scroller 2.03 Javascript 0
J DHTML Fading Animation Image Javascript 1
N preload background image animazione sequenza Javascript 1
J Enlarge Image 2 Javascript 0
voldemort Image resize con ASP.Net ASP.NET 1
L Problema aspect ratio image ASP.NET 1
J Javascript question to move image forward and back? Javascript 1
SolidSnake4 input type image PHP 4
T Script image random - Explorer non lo vede, mozilla si! Javascript 3
D Cercasi beta-tester per servizio di file/image hosting Altri Annunci 0
U next e prew su luke Image Viewer Classic ASP 4
Q VB& -problema troppe image. Applicazione lenta Programmazione 0
Q image resize PHP 0
giorgione_tg submit e image problemi con explorer HTML e CSS 1
open-think link utile per royalty free image Webdesign e Grafica 19
peppoweb Sample Image, workshop a Roma Discussioni Varie 0
grottafelix Drive Image Windows e Software 1
grottafelix Disabilitare la Image Toolbar di Explorer 6 Javascript 5
M Programma Adv (x banner rotation) Classic ASP 2
H Looking for a banner rotation script Programmazione 1
G [Javascript] Transition in OnClick Dropdown Menu Javascript 5
M Animate Transition css3 HTML e CSS 1
K Transition CSS3 menu a comparsa HTML e CSS 1

Discussioni simili