大轉盤圖片展示：

幸運大轉盤.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 八個位置的角度

                }

            }

         } 
    });

還是不太理解的可以留言，看到后第一時間回復大家。