效果——跑馬燈抽獎

 

跑馬燈思路：1.沿順時針轉動，即不按照獎品的index，因此設置一個獎品序號數組，將順時針轉動時各個獎品的index置入這個數組。

　　　　　　2.轉動動畫開始，若ajax請求到了獎品的序號，則轉動中止在對應的獎品中，提示抽獎成功信息。若請求出錯，則轉動兩圈後中止在動畫開始最初位置，並提示錯誤。

        <div class="con-center">
          <ul class="prize-area ">
            <li class="prize active"><img src="../images/prize1.jpg" alt=""><p class="prize-name">板磚</p></li>
            <li class="prize"><img src="../images/prize2.jpg" alt=""><p class="prize-name">紅酒</p></li>
            <li class="prize"><img src="../images/prize3.jpg" alt=""><p class="prize-name">話費點X1</p></li>
            <li class="prize"><img src="../images/prize4.jpg" alt=""><p class="prize-name">會員月卡</p></li>
            <li class="prize"><img src="../images/prize5.jpg" alt=""><p class="prize-name">300遊戲幣</p></li>
            <li class="btn-list"><a class="btn btn-lottery" href="javascript:;"></a></li>
            <li class="prize"><img src="../images/prize6.jpg" alt=""><p class="prize-name">雞蛋</p></li>
            <li class="prize"><img src="../images/prize7.jpg" alt=""><p class="prize-name">玫瑰</p></li>
            <li class="prize"><img src="../images/prize8.jpg" alt=""><p class="prize-name">拖鞋</p></li>
            <li class="prize"><img src="../images/prize9.jpg" alt=""><p class="prize-name">500遊戲幣</p></li>
            <li class="prize"><img class="png" src="../images/prize10.jpg" alt=""><p class="prize-name">小喇叭</p></li>
          </ul>
          <p class="lottery dv">個人抽獎次數: <span id="num"> 5 </span>[<a href="">得到更多抽獎機會</a>]</p>
          <p class="coupon">我有<i id="totalCoupon">30000000</i>兌換券，每次抽獎消耗<i id="couponNum"> 20</i>兌換券</p>
        </div>

<script type="text/javascript">
var oPageUrl = {
　　lottery: '/lottery'//抽獎url
};
var islogin = true;
// 當前用戶抽獎總次數
var lotteryTotal = 3;
</script>

 

 var ui = {};
 ui. $lotteryBtn: $('.btn-lottery');
 ui.$num: $('#num');
 ui.$prize: $('.prize');
 ui. $totalCoupon: $('#totalCoupon');
 ui.$couponNum: $('#couponNum');

 

            /* 抽獎 */
            var len = ui.$prize.length  //獎品個數
                , j = 0 // 獎品序號數組的下標
                , prizeTime = null // 抽獎輪播定時器
                , array = [0, 1, 2, 3, 5, 9, 8, 7, 6, 4] // 獎品序號數組
                , tag = false  // 監聽必定的時間
                , t = undefined // 中獎獎品序號
                , circleTime = 2000
                , changeTime = 100
                , i = 0
                , message = '';
            ui.$lotteryBtn.on('click', function () {
                j = 0;
                t = undefined;
                tag = false;
                if (islogin) {
                    if (prizeTime) {
                        return;
                    }
                    if (lotteryTotal > 0) {
                        var totalCoupon = parseInt(ui.$totalCoupon.text())
                            , couponNum = parseInt(ui.$couponNum.text());
                        changePrize();
                        setTimeout(circlePrize, circleTime);
                        $.ajax({
                            url: oPageUrl.lottery
                            , dataType: 'json'
                            , data: {}
                            , type: "POST"
                        }).done(function (msg) {
                            // msg.code = 1;
                            if (msg.code == 0) {
                                t = parseInt(msg.data.position)-1;
                                message = msg.message;
                                ui.$totalCoupon.text(totalCoupon - couponNum);
                            } else {
                                clearTimeout(prizeTime);
                                prizeTime = null;
                                ui.$lotteryFailBox.find(".title span").eq(1).html(msg.message);
                                self.fshowFailBox(true);
                            }
                        });
                    } else {
                        ui.$lotteryFailBox.find(".title span").eq(1).html("對不起，您沒有抽獎機會！");
                        self.fshowFailBox(true);
                    }
                } else {
                    self.fshowLoginBox(true);
                }
            });
            function changePrize() {
                j++;
                j = j % len;
                ui.$prize.removeClass('active').eq(array[j]).addClass('active');
                if (tag == true && array[j] == t) {
                    self.fshowSucBox(true, message);
                    clearTimeout(prizeTime);
                    prizeTime = null;
                    return;
                }
                prizeTime = setTimeout(changePrize, changeTime);
            }
            function circlePrize() {
                if (t == undefined) {
                    if (circleTime > 400) {
                        circleTime = circleTime / 2;
                    }
                    setTimeout(circlePrize, circleTime);
                } else {
                    tag = true;
                }
            }
            /* 抽獎 end*/