html抽奖效果制作图

先上代码：
css:
布局根据实际情况来

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;//转盘的经过点总数 
this.$lotBtn = $(".lot-btn");
this.$lotFirst = $(".index-0");
this.isRunning = false;
this.paramRoll = {
    moveTime: null,//初始时间

    moveTimeAdd: null,//加速度
    round: null,//转的圈数
    lastPos: null,//随机停止位置

    curRound: null,//初始化当前圈数
    counter: null//计数器
};

 }
    MyRoll.prototype = {
constructor: MyRoll,
BeginLot: function(){
    this.$lotBtn.on("click",function(){
        if(!isLogin()){return false;}
        if(!selfRoll.isRunning){
            selfRoll.isRunning = true;      //重置下抽奖状态
            selfRoll.sendRollAjax.call(this);    //发送ajax请求
        }
   });
},
sendRollAjax: function(){
        $.ajax({
            url: "/service/hdplatform/"+hdIndex+"/doRoll",
            type: "POST",
            dataType:"json",
            maskId: this,
            data: { lotteryId: _lotteryId},
            success:function(rsp){
                init();//抽奖次数
                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;//转的圈数
    this.paramRoll.lastPos = Math.floor(Math.random()*7);

    this.paramRoll.curRound = 1;//初始化当前圈数
    this.paramRoll.counter = 0;//计数器
    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 ){
   //对注释代码的优化---通过增加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();//执行抽奖完成后的回调函数
     },
    myDialog: function(){
    dialog.showMsgBox(selfRoll.desc);
     }
    }
   new MyRoll().BeginLot();

将抽奖效果分为各个阶段：
beginLot: 点击按钮的时候，如果不是正在抽奖 !isRunning为true，即允许抽奖；否则，允许抽奖，并且设置其为isRunning为true.
sendRollAjax: 设置发送ajax请求，当知道请求结果后，开始转动抽奖盘。
beforeRoll: 转动转盘的时候需要初始化第一个位置样式和转动的速度
rolling：递归函数调用，每一次设置下一个位置的样式，并判断该位置是不是到达终点了，如果不是，则调用自己
nextState: 下一个位置的样式设置
finishHandler: 执行完抽奖后，设置初始样式，并且设置为可以抽奖，isRunning为false;
myDialog: 最后抽奖的结果弹出个窗口。
注意：此抽奖只是模拟抽奖转动，最终结果以弹出的信息框为准。