實現效果:
點選“開始抽獎”，非同步到後臺請求抽獎結果，指標根據後臺返回的結果指向獎項。
效果圖:

前端：
1.引入

jquery以及jquery.rotate.min.js

2.頁面

 <div class="rotary-main">
              <ul class="rotary-list">
                <li class="prize item1"><img src="<ls:templateResource item='/resources/templets/goat/images/thanks.png'/>"
 
></li>
                <li class="prize item2"><img src="<ls:templateResource item='/resources/templets/goat/images/first-prize.png'/>"></li>
                <li class="prize item3"><img src="<ls:templateResource item='/resources/templets/goat/images/thanks.png'/>">
 
</li>
                <li class="prize item4"><img src="<ls:templateResource item='/resources/templets/goat/images/third-prize.png'/>"></li>
                <li class="prize item5"><img src="<ls:templateResource item='/resources/templets/goat/images/thanks.png'/>"></li
 
>
                <li class="prize item6"><img src="<ls:templateResource item='/resources/templets/goat/images/second-prize.png'/>"></li>
                <li class="prize item7"><img src="<ls:templateResource item='/resources/templets/goat/images/thanks.png'/>"></li>
                <li class="prize item8"><img src="<ls:templateResource item='/resources/templets/goat/images/third-prize.png'/>"></li>
              </ul>
              <div class="rotary-btn" ></div>
            </div>

其中li標籤的是圖片，這裡需注意，rotary-btn則是“開始抽獎”按鈕。

3.JS
1.寫轉盤轉動的方法

function scollRote(angles){
    $(".rotary-btn").rotate({
         angle:0,
         animateTo:angles+1800,
         duration:6000,
         callback:function (){}
    });
}

引數：angles是轉動的角度，主要是根據後臺返回的結果控制指標轉向，
duration轉盤轉動的時間。。。。
具體引數可參考rotate外掛的用法。
轉動的角度，需自己根據圖片多少計算計算，

1.開始抽獎繫結事件

function bind(){
    $(".rotary-btn").bind("click",function(){
        btnRotate();
    });
}

2.抽獎：非同步請求，根據返回結果呼叫轉盤轉動的方法，並控制指標指向

//抽獎
function btnRotate(){
     //解綁，指標轉動的時候不可再次請求
    $(".rotary-btn").unbind("click"); 
    //抽獎請求，返回抽獎結果
     $.ajax({
            url:  "?", 
            type:'post',  
            async : true, //預設為true 非同步   
            data:{},
            dataType : 'json',
            error: function(jqXHR, textStatus, errorThrown) {
            },
            beforeSend:function(){},
            success:function(data){
                              //比如這裡返回的data是不中獎
                              //不中獎的圖片所對應角度陣列，然後隨機返回，使指標根據角度指向圖片
                        var animateTo=[0,90,180,270]; 
                        scollRote(animateTo[Math.floor(Math.random()*animateTo.length)]);
                        setTimeout(function(){
                            //由於指標轉動設定為6000，那我同步時間，等待指標停止，再進行其他提示操作，這裡是再繫結指標轉動方法
                            bind();
                        }, 6000);
            }
        });

}

注：這裡指標指向圖片的角度需自己計算，一圈360，可根據圖片的個數進行相除

後臺:
簡單抽獎概率邏輯：
比如20/100;

int randomNum = 0;
        Random rand = new Random();  
        for(int i = 0 ;i<fz;i++){
            randomNum = (int)(rand.nextInt(fm));
            if(randomNum==1||randomNum==2||randomNum==3){
              break;
            }
        }

其中fz是20，fm是100，如果隨機數返回1，2，3就代表中獎
除此簡單邏輯也可以複製做，設定中獎期間，隨機數返回某個期間就代表某個獎項。