basti1012.bplaced.net

Hallo, ich möchte gerne 20 Bilder mittig auf dem Bildschirm kreisförmig darstellen. Die Bilder sollen wie ein Fächer übereinander liegen. füge ich " position:absolute; " ein liegen alle Bilder übereinander.

Code

                                    
                                <script src="/js_webseite/jquery.js"></script>
<style>
 
  #container { 
  width:400px;
}
.box {    
 border-radius:50%;
  height:120px;
  margin:18px;
  position:absolute;
  width:120px;
  padding:5px;
}
  img{
    height:50px;
    width:50px;
    border:1px solid red;
  }
</style>

<div id="container"></div>
<script>
   var total=9;//menge bilder
var radius=150;//in pixel von mittel achse
var x=150;//mittelpunkt x
var y=150;//"mittelpunkt y
var classname='.box';//Class name von img
for(i=1;i<=total;i++){
   $('#container').append('<img src="/image/150x150.png" class="box">');
 }
$(classname).each(function(index) { 
 $(this).css('margin-left', Math.floor(Math.cos(Math.PI * 2 / total * index) * radius) + x + 'px');
 $(this).css('margin-top', Math.floor(Math.sin(Math.PI * 2 / total * index) * radius ) + y + 'px');
    });
  </script>