先上代碼：
css:
布局根據(jù)實際情況來

html:

             <ul class="lot-ul">
                <li class="index-0"><p class="lp-font">1</p>   </li>
                <li class="index-1"><p class="lp-font">2</p></li>
                            <li class="index-2"><p class="lp-font">3</p></li>

                <li class="index-7"><p class="lp-font">8</p></li>
                <li class="lot-btn"><p class="lot-font">抽獎</p></li>
                <li class="index-3"><p class="lp-font">4</p></li>

                <li class="index-6"><p class="lp-font">5</p></li>
                <li class="index-5"><p class="lp-font">4</p></li>
                <li class="index-4"><p class="lp-font">3</p></li>
             </ul>

js:

  function MyRoll(){
   selfRoll = this;

this.desc = null;
this.point = 8;//轉(zhuǎn)盤的經(jīng)過點總數(shù) 
this.$lotBtn = $(".lot-btn");
this.$lotFirst = $(".index-0");
this.isRunning = false;
this.paramRoll = {
    moveTime: null,//初始時間

    moveTimeAdd: null,//加速度
    round: null,//轉(zhuǎn)的圈數(shù)
    lastPos: null,//隨機停止位置

    curRound: null,//初始化當(dāng)前圈數(shù)
    counter: null//計數(shù)器
};

 }
    MyRoll.prototype = {
constructor: MyRoll,
BeginLot: function(){
    this.$lotBtn.on("click",function(){
        if(!isLogin()){return false;}
        if(!selfRoll.isRunning){
            selfRoll.isRunning = true;      //重置下抽獎狀態(tài)
            selfRoll.sendRollAjax.call(this);    //發(fā)送ajax請求
        }
   });
},
sendRollAjax: function(){
        $.ajax({
            url: "/service/hdplatform/"+hdIndex+"/doRoll",
            type: "POST",
            dataType:"json",
            maskId: this,
            data: { lotteryId: _lotteryId},
            success:function(rsp){
                init();//抽獎次數(shù)
                if( rsp.result ){
                    selfRoll.desc = rsp.desc;
                    selfRoll.beforeRoll();
                }
                else{
                    selfRoll.isRunning = false;
                    dialog.showMsgBox(rsp.desc);
                }
            }
        });

 },
 beforeRoll: function( ){
    $(".index-0").addClass("lot-position");
    this.paramRoll.moveTime = 500;//初始時間
        
    this.paramRoll.moveTimeAdd = -40;//加速度
    this.paramRoll.round = 3;//轉(zhuǎn)的圈數(shù)
    this.paramRoll.lastPos = Math.floor(Math.random()*7);

    this.paramRoll.curRound = 1;//初始化當(dāng)前圈數(shù)
    this.paramRoll.counter = 0;//計數(shù)器
    setTimeout( this.rolling, this.paramRoll.moveTime );
             },
            rolling: function(){
    selfRoll.paramRoll.moveTime += selfRoll.paramRoll.moveTimeAdd;
    selfRoll.paramRoll.counter = 
            (selfRoll.paramRoll.counter+1) % selfRoll.point;

    selfRoll.nextState( selfRoll.paramRoll.counter );

    if( selfRoll.paramRoll.counter == selfRoll.paramRoll.lastPos ){
        if( selfRoll.paramRoll.curRound == selfRoll.paramRoll.round ){
            return selfRoll.finishHandler( selfRoll.paramRoll.lastPos , selfRoll.myDialog );
        }
        selfRoll.paramRoll.curRound = selfRoll.paramRoll.curRound+1;
    }

    setTimeout( selfRoll.rolling, selfRoll.paramRoll.moveTime );
        },
      nextState: function( _counter ){
   //對注釋代碼的優(yōu)化---通過增加8來避免為0情況的特殊處理
   var middle = _counter+selfRoll.point;
   $(".index-"+ (middle % selfRoll.point) ).addClass("lot-position");
   $(".index-"+ Number(middle-1) % selfRoll.point ).removeClass("lot-position");

   // if( _counter != 0 ){
   //     $(".index-"+_counter).addClass("lot-position");
   //     $(".index-"+Number(_counter-1) ).removeClass("lot-position");
   // }
   // else{
   //     $(".index-0").addClass("lot-position");
   //     $(".index-7").removeClass("lot-position");
   // }
      },
        finishHandler: function(_lastPos , _myCallBack){
    $(".index-"+_lastPos).removeClass("lot-position");
    this.isRunning = false;

    _myCallBack();//執(zhí)行抽獎完成后的回調(diào)函數(shù)
     },
    myDialog: function(){
    dialog.showMsgBox(selfRoll.desc);
     }
    }
   new MyRoll().BeginLot();

將抽獎效果分為各個階段：
beginLot: 點擊按鈕的時候禽车，如果不是正在抽獎 !isRunning為true，即允許抽獎许溅；否則，允許抽獎疚宇，并且設(shè)置其為isRunning為true.
sendRollAjax: 設(shè)置發(fā)送ajax請求扒最，當(dāng)知道請求結(jié)果后，開始轉(zhuǎn)動抽獎盤错维。
beforeRoll: 轉(zhuǎn)動轉(zhuǎn)盤的時候需要初始化第一個位置樣式和轉(zhuǎn)動的速度
rolling：遞歸函數(shù)調(diào)用奖地，每一次設(shè)置下一個位置的樣式，并判斷該位置是不是到達終點了赋焕，如果不是参歹，則調(diào)用自己
nextState: 下一個位置的樣式設(shè)置
finishHandler: 執(zhí)行完抽獎后，設(shè)置初始樣式隆判，并且設(shè)置為可以抽獎犬庇，isRunning為false;
myDialog: 最后抽獎的結(jié)果彈出個窗口。
注意：此抽獎只是模擬抽獎轉(zhuǎn)動侨嘀，最終結(jié)果以彈出的信息框為準(zhǔn)臭挽。