纯js旋转木马——自动旋转

<style type="text/css">
body{background:black}
.point{position:absolute;height:75px;border:1px silver solid}
#round{position:absolute;background:red;width:200px;height:200px;}
</style>
<script>
var r = 200;//圆半径
var dv = 0.01;//转速
var w = 100;//图片宽度
var x = 300;//left
var y = 100;//top
var pn = 8;//图片数，此处表示8张图片
var pi = 3.1415926575;
var d = pi / 2;
var pd = Math.asin(w / 2 / r);
var ed = pi * 2 / pn;
var smove = true;
function window.onload()
{
    var o = document.getElementById("imground");
    var arrimg = o.getElementsByTagName("img");

    for (n = 0; n < arrimg.length; n++)
    {
        arrimg[n].onmouseout = function() {
            smove = true;
        }

        arrimg[n].onmouseover = function() {
            smove = false;
        }

        arrimg[n].onmousedown = function() {
            dv = dv * 2;
        }
    }

    setInterval(roundMove, 20);
}
function roundMove()
{
    for (n = 1; n <= 8; n++)
    {
        var o = document.getElementById("p" + n);
        var ta = Math.sin(d + ed * n);
        var strFilter;

        if (ta < 0)
        {
            o.style.left = Math.cos(d + ed * n - pd) * r + x;
        }
        else
        {
            o.style.left = Math.cos(d + ed * n + pd) * r + x;
        }

        o.style.top = ta * 10 + 10 + y;//圆内上下图片间距
        o.style.width = Math.abs(Math.cos(d + ed * n + pd) - Math.cos(d + ed * n - pd)) * r;
        o.style.zIndex = ta * 10;//圆内前后图片水平间距

        if (o.style.zIndex < 0)
        {
            strFilter = "FlipH(enabled:true)"
        }
        else
        {    
            strFilter = "FlipH(enabled:false)";
        }

        if (ta < 0)
        {
            ta = (ta + 1) * 80 + 20;
        }
        else
        {
            ta = 100;
        }

        strFilter = strFilter + " alpha(opacity=" + ta + ")";
        o.style.opacity = ta / 100;
        o.style.filter = strFilter;
    }

    if (smove)
    {
        d = d + dv;
    }
}
</script>
<div id="imground">
<img class="point" id="p1" src="images/1.jpg"/>
<img class="point" id="p2" src="images/2.jpg"/>
<img class="point" id="p3" src="images/3.jpg"/>
<img class="point" id="p4" src="images/4.jpg"/>
<img class="point" id="p5" src="images/5.jpg"/>
<img class="point" id="p6" src="images/6.jpg"/>
<img class="point" id="p7" src="images/7.jpg"/>
<img class="point" id="p8" src="images/8.jpg"/>
</div>