抽獎跑馬燈

最近作了一個春節活動，裏面有個抽獎活動，作一個跑馬燈效果，示例以下

html代碼

<div class="lottery">
    <ul class="lottery-ul">
        <li class="lottery-unit lottery-unit-1" data-id="1"><span class="beans">20</span>雲豆</li>
        <li class="lottery-unit lottery-unit-2" data-id="2"><span class="beans">50</span>雲豆</li>
        <li class="lottery-unit lottery-unit-3" data-id="3"><span class="beans">100</span>雲豆</li>
        <li class="lottery-btn"><a class="lottery-start" href="javascript:void(0);">抽   獎</a></li>
        <li class="lottery-btn has-lottery hide"><a class="btn" href="#" disabled>已 抽 獎</a></li>
        <li class="lottery-unit lottery-unit-4" data-id="4"><span class="beans">1000</span>雲豆</li>
        <li class="lottery-unit lottery-unit-5" data-id="5"><span class="beans">2000</span>雲豆</li>
        <li class="lottery-unit lottery-unit-6" data-id="6"><span class="beans">5000</span>雲豆</li>
        <li class="lottery-unit lottery-unit-7" data-id="7"><span class="beans">10000</span>雲豆</li>
        <li class="lottery-unit lottery-unit-8" data-id="8"><span class="beans">20000</span>雲豆</li>
    </ul>
</div>

css代碼

.lottery .lottery-ul{position:relative;width:360px;height:360px;margin:0;padding:0;float:left;background:#ffeabc;}
.lottery .lottery-ul li {width:120px;height:120px;line-height:90px;color:#ff5152;;text-align:center;list-style-type: none;}
.lottery .lottery-ul li .beans{color:#ff5152;;font-size:20px;font-weight:bold;}
.lottery .lottery-ul li.lottery-unit-1{position:absolute;top:0;left:0;background:url("http://www.sinacloud.com/static/special/image/lottery_bg1.png") 0 0 no-repeat;}
.lottery .lottery-ul li.lottery-unit-2{position:absolute;top:0;left:120px;background:url("http://www.sinacloud.com/static/special/image/lottery_bg2.png") 0 0 no-repeat;}
.lottery .lottery-ul li.lottery-unit-3{position:absolute;top:0;left:240px;background:url("http://www.sinacloud.com/static/special/image/lottery_bg1.png") 0 0 no-repeat;}
.lottery .lottery-ul li.lottery-unit-4{position:absolute;top:120px;left:240px;background:url("http://www.sinacloud.com/static/special/image/lottery_bg2.png") 0 0 no-repeat;}
.lottery .lottery-ul li.lottery-unit-5{position:absolute;top:240px;left:240px;background:url("http://www.sinacloud.com/static/special/image/lottery_bg1.png") 0 0 no-repeat;}
.lottery .lottery-ul li.lottery-unit-6{position:absolute;top:240px;left:120px;background:url("http://www.sinacloud.com/static/special/image/lottery_bg2.png") 0 0 no-repeat;}
.lottery .lottery-ul li.lottery-unit-7{position:absolute;top:240px;left:0;background:url("http://www.sinacloud.com/static/special/image/lottery_bg1.png") 0 0 no-repeat;}
.lottery .lottery-ul li.lottery-unit-8{position:absolute;top:120px;left:0;background:url("http://www.sinacloud.com/static/special/image/lottery_bg2.png") 0 0 no-repeat;}
.lottery .lottery-ul li.active{
    background:url("http://www.sinacloud.com/static/special/image/lottery_bg_active.png") 0 0 no-repeat;}
.lottery .lottery-ul li.lottery-btn{position:absolute;top:120px;left:120px;width:120px;height:120px;background:#ffeabc;}
.lottery .lottery-ul li.lottery-btn a{display:inline-block;width:120px;height:120px;line-height:120px;text-align:center;font-size:30px;color:#fff;text-decoration:none;background:#fe8145;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;}
.lottery .lottery-ul li.has-lottery a{padding:0;border:none;}
.hide{display:none;}

js代碼

<script type="text/javascript" src="http://greetcard-mobile.stor.sinaapp.com/jquery.min.js"></script>
<script type="text/javascript">

    $(function(){
        //抽獎 
        var lottery={
            index:0,   //當前轉動到哪一個位置，起點位置
            count:0,    //總共有多少個位置
            timer:0,    //setTimeout的ID，用clearTimeout清除
            speed:20,   //初始轉動速度
            times:0,    //轉動次數
            cycle:50,   //轉動基本次數：即至少須要轉動多少次再進入抽獎環節
            prize:-1,
            end:5,   //中獎位置
            init:function(id){
                if ($("."+id).find(".lottery-unit").length>0) {
                    $lottery = $("."+id);
                    $units = $lottery.find(".lottery-unit");
                    this.obj = $lottery;
                    this.count = $units.length;
                    console.log($units.length);
                    $lottery.find(".lottery-unit-"+this.index).addClass("active");
                };
            },
            roll:function(num){
                var index = this.index;
                var count = this.count;
                var lottery = this.obj;
                console.log(count);
                $(lottery).find(".lottery-unit-"+index).removeClass("active");
                index += 1;
                if (index>count) {
                    index = 1;
                };
                $(lottery).find(".lottery-unit-"+index).addClass("active");
                this.index=index;
                return false;
            },
            stop:function(index){
                this.prize=index;
                return false;
            }
        };
    
        function roll(){
            lottery.times += 1;
            lottery.roll();
            //肯定抽獎，重置參數
            if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) {
                clearTimeout(lottery.timer);   //大於基本轉動次數+10，並轉動到獲獎位置，中止轉動
                lottery.prize=-1;
                lottery.times=0;
                click=false;
            }else{
                if (lottery.times<lottery.cycle) {
                    lottery.speed -= 10;   //小於基本轉動次數 轉動加速
                }else if(lottery.times==lottery.cycle) {
                    var index = lottery.end;
                    lottery.prize = index;   //肯定中獎位置
                }else{
                    lottery.speed += 20;   //大於基本轉動次數 轉動減速
                }
                if (lottery.speed<40) {
                    lottery.speed=40;
                };
                lottery.timer = setTimeout(roll,lottery.speed);
            }
            return false;
        }
        var click=false;
    
        window.onload=function(){
            lottery.init('lottery');
            $(".lottery-btn a.lottery-start").click(function(e){
                var target = $(e.target);
                if (click) {
                    return false;
                }else{  
                    //此處應該是ajax請求，因爲跨域，暫省略
                     lottery.speed=100;
                    lottery.end = 5;
                    roll();
                    click=true;
                    target.parents('.lottery-btn').addClass('hide');
                    $('.has-lottery').removeClass('hide');
                    return false;                                   
                }
            });
        };
    });
    </script>