I've just started learning how to do Javascript, so please bare with me.

I have a Javascript program that takes 6 images (I chose random teachers I knew) and displays them in the form of a hexagon. Now, I'm trying to set it up so the image hexagon will rotate counter clockwise for 3000 milliseconds. problem is I can't seem to figure out the best way to set this part up. here's my code so far:

Code:
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CS faculty members in hexagonal array</title>
<script type="text/javascript">
	<!--
	var pixArray = Array(6);

	function shiftPix(element, count, index) {
		var pi = 3.1415926535;  // Number.PI SHOULD work but doesn't seem to.

		// left: x coordinate, top: y coordinate
		y = 300 + 150 * Math.cos(2 * pi * (count + index)/6);
	  	x = 300 + 150 * Math.sin(2 * pi * (count + index)/6);


	  	element.style.left = x + "px";
	  	element.style.top = y + "px";

	}

	function display() {

	  	for (j = 0; j < 6 ; j++) {
			shiftPix(pixArray[j], counter, j);
		}
	}
	// -->
</script>
</head>

<body>

  <div id="John" style="position:absolute;left:300px;top:450px">
	  <img src="picture1.jpg" alt="John Santore" width="90" height="120" />
  </div>
  <div id="Seikyung" style="position:absolute;left:430px;top:375px">
	  <img src="picture2.jpg" alt="Seikyung Jung" width="90" height="120" />
  </div>
  <div id="Glenn" style="position:absolute;left:430px;top:225px">
	  <img src="picture3.jpg" alt="Glenn Pevlicek" width="90" height="120" />

  </div>
  <div id="Lee" style="position:absolute;left:300px;top:150px">
	  <img src="picture4.jpg" alt="Lee Mondshein" width="90" height="120" />
  </div>
  <div id="Abdul" style="position:absolute;left:170px;top:225px">
	  <img src="picture5.jpg" alt="Abdul Sattar" width="90" height="120" />
  </div>
  <div id="Toby" style="position:absolute;left:170px;top:375px">
	  <img src="picture6.jpg" alt="Toby Lorenzen" width="90" height="120" />

  </div>

  <script type="text/javascript">
	<!--
	  var counter = 0;

	  pixArray[0] = document.getElementById("John");
	  pixArray[1] = document.getElementById("Seikyung");
	  pixArray[2] = document.getElementById("Glenn");
	  pixArray[3] = document.getElementById("Lee");
	  pixArray[4] = document.getElementById("Abdul");
	  pixArray[5] = document.getElementById("Toby");

	  display();
	// -->
  </script>
</body>
</html>
The highlighted areas where I'm pretty sure I should start modifying and for the timer, I know I should have it set up something like "setTimeOut("display"(), 3000), I'm just stuck on where to go from. If there's anything you could do to help me out with this, I'd really appreciate it.