« »

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

Label: Rotating Links

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
CSS
JavaScript
HTML
Print

Copy All x2

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

Copy All x2

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

Copy All x2

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