使用jquery在圆圈中旋转多个图像

我需要使用 jquery在同一轨道圆圈中旋转多个图像.我更改并延迟了两个图像的时间间隔.问题是图像在几秒钟后重叠.我的代码是

<script type="text/javascript">
            var p = 0;

            function moveit() {
            p += 0.02;

            var r = 135;
            var xcenter = 500;
            var ycenter = 200;
            var newLeft = Math.floor(xcenter + (r * Math.cos(p)));
            var newTop = Math.floor(ycenter + (r * Math.sin(p)));
            $('#friends').animate({
                    top: newTop,left: newLeft,},10,function() {
                    moveit();
            $('#friends2').animate({
                top: newTop,15,function() {
                moveit();
            });
             }
            $(document).ready(function() {
                moveit();    
            });
            </script>

我的css和html源代码是

#friends { position: absolute;     }         
     #friends2 { position: absolute;    }     

 <img src="Images/info.gif" id="friends"/>
<img src="Images/circle.jpg" id="circles" />
<img src="Images/help.gif" id="friends2" />

现场演示：http://jsfiddle.net/W69s6/embedded/result/,但这是单张图片..
有什么建议??

编辑：：
    我的形象

要么

样本链接http://www.templatemonster.com/demo/38228.html

解决方法

Check this example

它有两个项目,以相同的速度在同一轨道上旋转.它永远不会重叠.

编辑：

并且here is the example对于4个项目以相同的速度和相同的轨道旋转但是同样分开.

要添加更多项目,只需通过添加不同的角度来调整代码.

更新：

And here is the simple image version

希望这会有所帮助.干杯!!!