Rotierende Bilder

Bei diesem Javascript könnt ihr eine beliebige Anzahl verschiedener Bilder im Kreis rotieren lassen.

Dabei könnt ihr nicht nur die Bilder und deren zugehörige Links, sondern auch die Geschwindigkeit, die Position, die Richtung und den Radius des Kreises am Anfang des Scripts ändern.

In unserem Beispiel rotieren 4 beliebige Bilder.

Um die Bilder anzupassen, ändert bitte das Array bilder. Dort fügt ihr die Links und Bilder nach folgendem Muster ein:

Link-URL => Bild-URL

Also z. B. so:

http://kostenlose-javascripts.de => https://www.kostenlose-javascripts.de/images/logo.jpg

<!-- präsentiert von kostenlose-javascripts.de --> <script type='text/javascript'> <!-- // Größe und Position anpassen var zx,zy; var mittex = 100; var mittey = 50; var radius = 100; var speed = 2; // 1-10... + oder - für Richtung var bilder_i = 0; var bilder = new Array(); var alpha = new Array(); // hier die Bilder anpassen // Syntax: Link-URL => Bild-URL bilder[bilder_i++] = 'http://twitter.com/kostenlosejavas => https://www.kostenlose-javascripts.de/modules/mod_followme/images/followme_left.png'; bilder[bilder_i++] = 'http://de.jimdo.com/#ref=a869611 => https://www.kostenlose-javascripts.de/images/stories/logo_jimdo.gif'; bilder[bilder_i++] = 'https://www.kostenlose-javascripts.de => https://www.kostenlose-javascripts.de/images/stories/_melon.gif'; bilder[bilder_i++] = 'http://www.mozilla.com/firefox?from=sfx&uid=258744&t=331 => http://sfx-images.mozilla.org/affiliates/Buttons/firefox3/125x125FF3.png'; // ab hier nichts mehr ändern function initRotat() { alpha_tmp = 0; speed = speed / 1000; for ( var i = 0; i < bilder.length; i++) { alpha[i] = 6.28 / (bilder.length) + alpha_tmp; // 0,1.6,3.2,4.8 var tmp = bilder[i].split(" => "); document.write('<div id="icon'+i+'" style="position:absolute;"><a href="'+tmp[0]+'"><img src="'+tmp[1]+'" alt="" border="0" /></a></div>'); alpha_tmp = alpha[i]; } } function pol_zu_kart(mx,my,radius,alp) { zx = mx + (radius * Math.sin(alp)); zy = my + (radius * Math.cos(alp)); } function weiterdrehen() { for (var i = 0; i < bilder.length; i++) { alpha[i]+=speed; if (speed>0) { if(alpha[i]>6.28) alpha[i]-=6.28; } else { if(alpha[i]<0) alpha[i]+=6.28; } pol_zu_kart(mittex,mittey,radius,alpha[i]); document.getElementById('icon'+i).style.top=zy+'px'; document.getElementById('icon'+i).style.left=zx+'px'; } } initRotat(); //--> </script> <br /> JavaScript von <a href="http://www.kostenlose-javascripts.de/javascripts/bilder/rotierende-bilder/" target="_blank">kostenlose-javascripts.de</a> <br /> <script type="text/javascript">status = window.setInterval("weiterdrehen()",10);</script> <!-- präsentiert von kostenlose-javascripts.de -->