»
EnglishFrenchVietnamese

Print - Rotating Links - JavaScriptBank.com

Full version: jsB@nk » Link » Rotating Links
URL: http://www.javascriptbank.com/rotating-links.html

Rotating Links © JavaScriptBank.comRotates a multitude of links in a circle... as if you were looking at the ridged side of a quarter laying flat on a table. Not meant for more than about five or six links. Not EASILY customizable... Knowledge of code required for changing number of links to rotate. But customizable nonetheless.

Full version: jsB@nk » Link » Rotating Links
URL: http://www.javascriptbank.com/rotating-links.html



CSS
<STYLE>DIV.spin {WIDTH: 15px; POSITION: absolute; BACKGROUND-COLOR: white}DIV.spinback {Z-INDEX: -1; WIDTH: 15px; POSITION: absolute}</STYLE><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


JavaScript
<SCRIPT language=javascript>// You must add your own "linkinfo" for each page. And the highest index in linkinfo must match numoflinks.// You must also change the "width" property according to the size of the text in the <div>. (Measured in pixels)// Yofcircle and Xofcircle control where the pivot point of the circle is.function declarevars() {numoflinks = 4;rotatespeed = 1;Yofcircle = 70;Xofcircle = 550;Widthofcircle = 100;numofdeg = 360 / numoflinks;theta = 360;temp = 0;if (numoflinks % 2) {currentcenter = 0;} else {currentcenter = numoflinks /2}linkinfo = new Array();linkinfo[1] = '<a href=http://javascriptbank.com>1</a>';linkinfo[2] = '<a href=http://javascriptbank.com>2</a>';linkinfo[3] = '<a href=http://javascriptbank.com>3</a>';linkinfo[4] = '<a href=http://javascriptbank.com>4</a>';}function drawobjects() {for (i = 1; i <= numoflinks; i++) {document.write('<center><div class="spin" id=spin>' + linkinfo[i] + '</div></center>');}movetoplaces();}function movetoplaces() {objects = new Array();objects = document.all("spin");for (i = 0; i < numoflinks; i++) {objects[i].style.top = Yofcircle;objects[i].style.left = Xofcircle + Math.sin(theta * Math.PI / 180 + (2 * Math.PI / (numoflinks) * i)) * Widthofcircle;if (i != currentcenter) {objects[i].className = "spinback";} else {objects[i].className = "spin";}}}function clockwise() {clearclass();theta -= rotatespeed;temp -= rotatespeed;for (i = 0; i < numoflinks; i++) {objects[i].style.left = Xofcircle + Math.sin(-1 * theta * Math.PI / 180 + (2 * Math.PI / (numoflinks) * i)) * Widthofcircle;if (theta < -360) {theta = 0;}}if (temp != numofdeg * -1) {setTimeout("clockwise()", 10);} else {setclass();}}function setclass() {for (i = 0; i < numoflinks; i++) {if (i != currentcenter) {objects[i].className = "spinback";} else {objects[i].className = "spin";}}}function counter() {clearclass();theta += rotatespeed;temp += rotatespeed;for (i = 0; i < numoflinks; i++) {objects[i].style.left = Xofcircle + Math.sin(-1 * theta * Math.PI / 180 + (2 * Math.PI / (numoflinks) * i)) * Widthofcircle;if (theta > 360) {theta = 0;}}if (temp != numofdeg) {setTimeout("counter()", 10);} else {setclass();}}function clearclass() {for (i = 0; i < numoflinks; i++) {objects[i].className = "spinback";}}function changecenter(num) {temp = 0;currentcenter += num;if (currentcenter > numoflinks - 1) {currentcenter = 0;}if (currentcenter < 0) {currentcenter = numoflinks - 1;}if (num == -1) {clockwise();} else {counter();}}</SCRIPT><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<SCRIPT>declarevars();drawobjects();</SCRIPT><BUTTON onclick=changecenter(-1);>&lt;-Left</BUTTON> <BUTTON onclick=changecenter(1);>Right-&gt;</BUTTON><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->