moving pictures in circular way
<p>i have  following code for moving 4 picture around circular way,but it can rotate only two of them</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Moving div&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id = "listDiv"&gt;
    &lt;img id="img1" width="200" height="200" /&gt;&lt;br /&gt;
    &lt;span id="quote1" &gt;&lt;/span&gt;
&lt;/div&gt;
&lt;div id="listDiv1"&gt;
&lt;img id="img2"  width="200" height="200"/&gt;&lt;br/&gt;
&lt;span id="quote2 "&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;div id="listDiv2"&gt;
&lt;img id="img3" width="200" height="200"/&gt;&lt;br/&gt;
&lt;span id="quote3 "&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;div id="listDiv3"&gt;
&lt;img id="img4" width="200" height="200"/&gt;&lt;br/&gt;
&lt;span id="quote4 "&gt;&lt;/span&gt;
&lt;/div&gt;

&lt;script&gt;

var listDiv = document.getElementById("listDiv");

var lisDiv1=document.getElementById("listDiv1");
var listDiv2=document.getElementById("listDiv2");
var listDiv3=document.getElementById("listDiv3");
var quote1 = document.getElementById("quote1");
var quote2 = document.getElementById("quote2");
var quote3 = document.getElementById("quote3");
var quote4 = document.getElementById("quote4");
var img1 = document.getElementById("img1");
var img2 = document.getElementById("img2");
var img3 = document.getElementById("img3");
var img4 = document.getElementById("img4");
listDiv.style.backgroundColor = "lightBlue";


listDiv.style.position = "absolute";
listDiv1.style.position = "absolute";
listDiv2.style.position = "absolute";
listDiv3.style.position = "absolute";

var intervalHandle = setInterval(changeSecond, 10);

var counter=0;

var pics = [
"http://www.dyslexiaassociation.ca/gallery/famous/AlbertEinstein.jpg",
"http://www.historyking.com/images/Black-Famous-People.jpg",
"http://www.historyking.com/images/Famous-People-From-Washington.jpg",
"http://baobongdaso24h.com/wp-content/uploads/2011/10/Steve-Jobs-chet1.jpg",
"http://www.stgabss.net/SpecialNeeds/images/stories/famous/john_lennon_portrait.jpg",
"http://imgs.inkfrog.com/pix/just4kids2/President-George-W-Bush_mprtp.jpg",
"http://www.smilorama.com/img/people/rare_photos_of_famous_people/rare_photos_of_famous_people04.jpg"
]; 

var quotes = [
'E=mc&lt;sup style="font-size:xx-small"&gt;2&lt;/sup&gt;',
"I have a dream",
"Be nice to nerds.&lt;br/&gt;Chances are you'll&lt;br/&gt;end up working for one",
"You are holding it wrong",
"Imagine all the people",
"I know the human being&lt;br/&gt;and fish can coexist peacefully.",
"The name is Bond, James Bond"
];


function changeSecond(){
  if (counter++%2==0){
    if (counter&gt;700){
      counter=0;
    }
    //change the text every 101 counts
    if (counter%101==0){
      var randomIndex = Math.floor(Math.random()*pics.length);
      img1.setAttribute("src", pics[randomIndex]);
      quote1.innerHTML=quotes[randomIndex];
       img2.setAttribute("src", pics[randomIndex]);
      quote2.innerHTML=quotes[randomIndex];
       img3.setAttribute("src", pics[randomIndex]);
      quote3.innerHTML=quotes[randomIndex];
       img4.setAttribute("src", pics[randomIndex]);
      quote4.innerHTML=quotes[randomIndex];
    }
    //move the element to the left:
    listDiv.style.left =400+200*Math.cos(counter/90)+"px"; 
    //move the element down:
    listDiv.style.top =400+200*Math.sin(counter/90)+"px"; 
      listDiv1.style.left =400 + 300* Math.cos(counter/90)+"px";
      listDiv1.style.top =400 + 200 * Math.cos(counter/90)+"px";
      listDiv2.style.left =400 + 200 * Math.cos(counter/90)+"px";
      listDiv2.style.top =400 + 200 * Math.cos(counter/90)+"px";
      listDiv3.style.left =400 + 200 * Math.cos(counter/90)+"px";
      listDiv3.style.top =400 + 2width="200" height="200"00 * Math.cos(counter/90)+"px";
  }
}


&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>what can i do?</p>
