You can use some simple trigonometry such as this:

ONLINE DEMO HERE

function loop() {

    /// calc x and y position with radius of center +
    x = cx + radius * Math.cos(angle * Math.PI / 180);
    y = cy + radius * Math.sin(angle * Math.PI / 180);

    /// set satelite's center to that position
    $('#sat1').css({left:x - radiusSat, top:y - radiusSat});

    /// increase angle
    angle++;
    if (angle>360) angle = 0;

    /// loop
    requestAnimationFrame(loop);
}

The demo is extended to support all five satellites. You will of course need to add the other satellites your self. You can increase speed by increasing the increment for angle.

Note ref. your new comment to the post: the code and example here shows the principles of what you need to do in order to achieve the result your are after. As purpose of SO is not to produce free code/full solutions this is not provided, but using the principles shown and demonstrated here you should be able to adopt them to do what you want them to do.

There are other ways to move the satellites such as using CSS3 transforms/animation (which will give you smoother motions as you can use fractional positions), Canvas element, jQuery path etc.

You asked for a JavaScript solution, but it's possible to do this in most modern browsers without any JavaScript by using keyframe animations.

Demonstration on Dabblet.

CSS

@keyframes rotate {
    0%, 50% {
        /* Keep the element at 12 o'clock until halfway through animation. */
        transform: rotate(0deg) translateY(-150px) rotate(0deg);
    }
}

#centre {
    /* Position circles in the centre of the viewport. */
    position: fixed;
    left: 50%;
    top: 50%;

    /* IE 10 bug: force hardware acceleration to prevent edge pixels
       being left behind on animation. */
    transform: rotateZ(0.01deg);
}

.circle {
    background: red;
    border-radius: 50%;
    position: absolute;
}

.middle {
    height: 200px;
    width: 200px;
    left: -100px; /* top/left equal to radius. */
    top: -100px;
}

.outer {
    /* Note: first half of animation duration is spent at 12 o'clock. */
    animation: rotate 2s ease-out 1;
    height: 60px;
    width: 60px;
    left: -30px; /* top/left equal to radius. */
    top: -30px;
}

.at-8-oclock {
    /* Two rotate transforms are used to maintain orientation while turning.
       First rotate is angle about centre from top; second is just minus this.
       translateY is set to the radius of the circular path being followed. */
    transform: rotate(-120deg) translateY(-150px) rotate(120deg);
}

.at-10-oclock {
    transform: rotate(-60deg) translateY(-150px) rotate(60deg);
}

.at-12-oclock {
    transform: rotate(0deg) translateY(-150px) rotate(0deg);
    z-index: 2; /* This one stays on top. */
}

.at-2-oclock {
    transform: rotate(60deg) translateY(-150px) rotate(-60deg);
    z-index: 1; /* Make this slide out from between 12 and 4 o'clock. */
}

.at-4-oclock {
    transform: rotate(120deg) translateY(-150px) rotate(-120deg);
}