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

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

 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, left: newLeft, },15, function() { moveit(); }); } $(document).ready(function() { moveit(); });  

我的css和html源代码是

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

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

编辑::我的形象

要么

示例链接http://www.templatemonster.com/demo/38228.html

Answer 1

检查此示例

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

编辑：

以下是以相同速度和相同轨道旋转但同样分开的4个项目的示例 。

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

更新：

这是简单的图像版本

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

Answer 2

您的代码有效，但看起来您有语法错误; 你的第一个移动电话没有正确结束。

这个有相同的轨道，不同的速度http://jsfiddle.net/thinkingsites/FyMCc/

编辑

您的错误是将命令旋转到同一函数中的两个项目。 他们都抓住了相同的顶部和左边并且总是相互绑定，更不用说他们都调用moveit（）所以每次调用moveit时，它会在内部调用两次。

我已经修复了你的递归，所以它只发生一次，并使moveit接受目标元素以及不同的起始位置（移位）。

这个有相同的轨道，相同的速度，不同的位置http://jsfiddle.net/thinkingsites/QAT7C/11/