jquery rotate幸运抽奖大转盘

大转盘图片展示：

幸运大转盘.png

下载地址：http://www.jq22.com/jquery-info308
演示地址：http://www.jq22.com/yanshi308

引入需要的js文件这个不必多说，说下如何使用，代码部分详解

var rotateFunc = function(awards,angle,text){  //awards:你想要奖项的位置，angle:奖项对应的角度，像本案例我们分为八块，角度之间的相差360/8=45°。

        $('#lotteryBtn').stopRotate();

        $("#lotteryBtn").rotate({

            angle:0, 

            duration: 5000, 

            animateTo: angle+1440, //angle是图片上各奖项对应的角度，1440是我要让指针旋转4圈。所以最后的结束的角度就是这样子^^

            callback:function(){
                //当转盘停止后执行的回调函数
                alert(text)

            }

        }); 

    };

当点击转盘中心开始抽奖

$("#lotteryBtn").rotate({ 

       bind: 

         { 

            click: function(){

                var time = [0,1];

                    time = time[Math.floor(Math.random()*time.length)];

                if(time==0){

                    timeOut(); //网络超时

                }

                if(time==1){

                    var data = [1,2,3,0]; //返回的数组 

                        data = data = data[Math.floor(Math.random()*data.length)];//转盘停止后你想让它停留在第几个位置

                    if(data==1){

                        rotateFunc(1,157,'恭喜您抽中的一等奖')

                    }

                    if(data==2){

                        rotateFunc(2,247,'恭喜您抽中的二等奖')

                    }

                    if(data==3){

                        rotateFunc(3,22,'恭喜您抽中的三等奖')

                    }

                    if(data==0){

                        var angle = [67,112,202,292,337];

                            angle = angle[Math.floor(Math.random()*angle.length)]

                        rotateFunc(0,angle,'很遗憾，这次您未抽中奖')

                    }
                    //22 67 112 157 202 247 292 337 八个位置的角度

                }

            }

         } 
    });

还是不太理解的可以留言，看到后第一时间回复大家。