网页js,javascript抽奖大转盘

效果图:

html代码:

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>RunJS</title>
        <script  class="jquery library"  src="./jquery-1.8.2.min.js"  type="text/javascript"></script>
        <script  type="text/javascript"  src="./jQueryRotate.2.2.js"></script>
    </head>
    <body>   
    <div  id="lottery"><img  id="imgs"  src="./disc-rotate.gif"  viewbox="0 0 352 30"  style="position: absolute; left: 47px; top: 47px; width: 352px; height: 352px;"  class="image">
                <div  class="arrow"></div>
                <div  class="lot-btn first">
                    <span></span>
                </div>
            </div>



        <style>#lottery {
    background: url("./disc-bg.gif") no-repeat scroll 0 0 transparent;
    height: 450px;
    left: 50px;
    position: absolute;
    width: 450px;
}
#lottery .arrow {
    background: url("./arrow.png") no-repeat scroll 0 0 transparent;
    height: 191px;
    left: 207px;
    position: absolute;
    top: 91px;
    width: 32px;
}
#lottery .lot-btn {
    height: 92px;
    left: 177px;
    overflow: hidden;
    position: absolute;
    top: 181px;
    width: 91px;
}
#lottery .lot-btn span {
    cursor: pointer;
    display: block;
    height: 92px;
    position: relative;
    width: 91px;
}

#lottery .first span {
    background: url("./buttons_01.png") no-repeat scroll 0 0 transparent;
}</style>
                <script>$(function() {

    $(".lot-btn").click(function() {

        for (var i = 0; i <= 10000; i++) {

            $("#imgs").rotate({
                animateTo: i,
                duration: 10000
            });
            if (i >= 3986) {

                break;
            }

        }
    })

});</script>

</body></html>