FLYING RING OF IMAGES (2)

[Hape]

Dieses JavaScript erstellt einen lustigen fliegenden Bilderring. Dieser Ring wird permanent verkleinert und vergrößert, während er auf Ihrer Webseite schwebt. Sie können beliebig viele Bilder hinzufügen. Einfache Konfiguration von Größe und Transparenz.

In diesem Beispiel werden die Bilder als Bildrotation dargestellt.

Code: Alles auswählen

<!---------------------------------------------->
<!-- START OF CODE FOR IMAGE RING SCRIPT -->
<!---------------------------------------------->
<script>
// CREDITS:
// Flying Ring of Images
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com.

// MOVEMENT CREDITS:
// The Movements of this script are based upon a Multi-Fx1 Script 
// by kurt.grigg@virgin.net

// IMPORTANT: 
// If you add this script to a script-library or script-archive 
// you have to add a link to http://www.fabulant.com on the webpage 

// Set the URLS of your images. Add as many images as you like
var myimage=new Array("flower.png","flowergreen.png","flowerorange.png")

// Set the number of images shown at once within one circle
var numberofimages=9

// Set the width of your images. All images will be set to this width
var imgwidth=40

// Set the maximal size of carousel (px)
var maxcarouselsize=240

// Set the minimal size of carousel (px)
var mincarouselsize=1

//Set the opacity od the images. values my range from 0 to 100
var imgopacity=70

// Do not edit below this line
var i_myimage=0
var divider=(36/(numberofimages+1))
var step=0.1;
var a_StEp=0.05;
var RunTime=10;
var currStep = 0;
var x_coordinate = 0;
var y_coordinate = 0;
var cntr=2;
var screenheight=document.body.clientHeight
var screenwidth=document.body.clientWidth
numberofimages-=1

function fly(){
	y_coordinate=document.body.scrollTop+document.body.offsetHeight/2 + document.body.offsetHeight/3*Math.cos((RunTime)/3)*Math.cos(RunTime/10);
	x_coordinate=document.body.scrollLeft+document.body.offsetWidth/2 + document.body.offsetWidth/3*Math.sin((RunTime)/3)*Math.sin(RunTime/10);

	RunTime+=a_StEp;
	Tma=setTimeout("fly()", 15);
}

function cycle(){
 	for (i=0;i<=numberofimages;i++) {
 			document.getElementById(i).style.top=y_coordinate+cntr*Math.cos(((currStep+1)+i*divider)/5)*Math.cos(currStep/5)+"px"
 			document.getElementById(i).style.left=x_coordinate+cntr*Math.sin(((currStep+1)+i*divider)/5)+"px";
			if (parseInt(document.getElementById(i).style.left) > (document.body.scrollLeft+document.body.offsetWidth-(1.7*imgwidth)) || parseInt(document.getElementById(i).style.top) > (document.body.scrollTop+document.body.offsetHeight-(1.5*imgwidth))) {
				document.getElementById(i).style.left=-2000+"px"
				document.getElementById(i).style.top=-2000+"px"
			}
 	}
	currStep+=step;
	setTimeout("cycle()",10);
}

function minimize() {
	cntr-=0.5;
	goshrink=setTimeout('minimize()',10);
	if (cntr <=mincarouselsize) {
		for (i=0;i<=numberofimages;i++) {
			document.getElementById(i).innerHTML='<img src="'+myimage[i_myimage]+'" width='+imgwidth+'></div>'
		}	
		i_myimage++
		if (i_myimage>=myimage.length) {
			i_myimage=0
		}
		clearTimeout(goshrink);
		swell()
	}
}

function swell() {
	cntr+=0.5;
	GoSwell=setTimeout('swell()',10);
	if (cntr >=maxcarouselsize) {
		clearTimeout(GoSwell);
		minimize()
	}
}

function init(){
	fly();
	cycle();
	minimize();
}


	for (i=0;i<=numberofimages;i++) {
		document.write('<div id="'+i+'" style="position:absolute;top:-5000px;left:0px;filter:alpha(opacity='+imgopacity+');opacity:'+(imgopacity/100)+';"><img src="'+myimage[0]+'" width='+imgwidth+'></div>')
	}

window.onload=init;
</script>
<!---------------------------------------------->
<!-- END OF CODE FOR IMAGE RING SCRIPT -->
<!---------------------------------------------->

Flying Ring-2