Untitled

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #container{
                position:relative;
                width:300px;
                height:300px;
            }
        </style>
    </head>

    <body>
        <div id="container">

        </div>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function(){
                var r  = 100;
                var x = 150;
                var y = 150;

                var N = 20;
                var cAngle = 360 / N;

                for(var i = 0; i < N; i++){
                    var angle = cAngle * i;
                    var img = $("<img>");
                    $(img).attr('src', 'city2.jpg');

                    var radian = (angle * Math.PI) / 180;
                    var left = x + r * Math.cos(radian);
                    var top =  y + r * Math.sin(radian);
                    $(img).css({'position':'absolute', 'left':left, 'top':top});
                    $("#container").append($(img));
                }


            });
        </script>

    </body>

</html>