FLYING RING OF IMAGES

[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.

Code: Alles auswählen

<!---------------------------------------------->
<!-- START OF CODE FOR IMAGE RING SCRIPT -->
<!---------------------------------------------->
<script>
// CREDITS:
// JavaScript carousel slideshow
// 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","flower.png","flowergreen.png","flowerorange.png","flower.png","flowergreen.png","flowerorange.png")

// 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 divider=(36/(myimage.length+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

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

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

function cycle(){
 	for (i=0;i<myimage.length;i++) {
 			document.getElementById(i).style.top=y_coordinate+cntr*Math.cos(((currStep+1)+i*divider)/5)*Math.cos(currStep/6)+"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()",5);
}

function minimize() {
	cntr-=0.5;
	goshrink=setTimeout('minimize()',10);
	if (cntr <=mincarouselsize) {
		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<=myimage.length-1;i++) {
		document.write('<div id="'+i+'" style="position:absolute;top:-5000px;left:0px;filter:alpha(opacity='+imgopacity+');opacity:'+(imgopacity/100)+';"><img src="'+myimage[i]+'" width='+imgwidth+'></div>')
	}

window.onload=init;

</script>

<!---------------------------------------------->
<!-- END OF CODE FOR IMAGE RING SCRIPT -->
<!---------------------------------------------->

Demoseite dazu hier: Flying-Ring

flower.png (26.6 KiB) 7467 mal betrachtet

flowergreen.png (21.26 KiB) 7467 mal betrachtet

flowerorange.png (20.81 KiB) 7467 mal betrachtet