Rotate multiple images in a circle using jquery

问题

I need to rotate multiple images in the same orbit circle using jquery.I changed and delayed the time intervals for both the images. The problem is both the images are overlapping after few seconds. my code is

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

my css and html source codes are

   #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" />

Live demo: http://jsfiddle.net/W69s6/embedded/result/ but this is for single image.. Any suggestion ??

edit:: my image

sample link http://www.templatemonster.com/demo/38228.html

回答1:

Check this example

It has two items which is rotating on same orbit at same speed. It will never overlap.

EDIT:

And here is the example for 4 items to be rotated at same speed and same orbit but equally separated.

To add more items, just tweak the code by adding different angle to it.

UPDATE:

And here is the simple image version

Hope this will help. Cheers !!!

回答2:

Your code works, though it looks like you had a syntax error; your first moveit call was not properly ended.

This one has same orbit, different speeds http://jsfiddle.net/thinkingsites/FyMCc/

EDIT

Your error was putting the command to rotate both of items in the same function. They both grabbed the same top and left and were always mutually bound, not to mention they both called moveit() so for every time moveit was called, it would be called twice more internally.

I've fixed your recursion so it only happens once, and made moveit accept the target element as well as a different starting position (shift).

This one has same orbit, same speed, different locations http://jsfiddle.net/thinkingsites/QAT7C/11/

来源：https://stackoverflow.com/questions/10563419/rotate-multiple-images-in-a-circle-using-jquery

标签

jquery

css

image

jquery-animate