手机端转盘抽奖代码分享

<div class="turntableWap top10">

 <table border="0" cellspacing="0">

 <tr>

 <td tag="0"><img src="../images/4.png" alt="4元"></td>

 <td tag="1" class="even"><img src="../images/6.png" alt="6元"></td>

 <td tag="2"><img src="../images/8.png" alt="8元"></td>

 <td tag="3" class="even"><img src="../images/11.png" alt="11元"></td>

 </tr>

 <tr>

 <td tag="13" class="even"><img src="../images/13.png" alt="13元"></td>

 <td colspan="2" rowspan="3" class="zpBtn"><img src="../images/zpBtn.jpg" /></td>

 <td tag="4"><img src="../images/40.png" alt="40元"></td>

 </tr>

 <tr>

 <td tag="12"><img src="../images/80.png" alt="80元"></td>

 <td tag="5" class="even"><img src="../images/125.png" alt="125元"></td>

 </tr>

 <tr>

 <td tag="11" class="even"><img src="../images/250.png" alt="250元"></td>

 <td tag="6"><img src="../images/400.png" alt="400元"></td>

 </tr>

 <tr>

 <td tag="10"><img src="../images/1000.png" alt="1000元"></td>

 <td tag="9" class="even"><img src="../images/iphone6.png" alt="iphone6"></td>

 <td tag="8"><img src="../images/Thank2.png" alt="谢谢惠顾"></td>

 <td tag="7" class="even"><img src="../images/500.png" alt="500元"></td>

 </tr>

 </table>

 </div>

.turntableWap{ padding:1rem; background:url(../images/zpTabBg.jpg) no-repeat center; background-size:100% 100%;}

.turntableWap table{ width:100%;}

.turntableWap table td{ vertical-align:middle; text-align:center; background-color:#ecd295;}

.turntableWap table td img{ width:100%; }

.turntableWap table td.even{background-color:#f6e8c5}

.turntableWap table td.active{ background-color:#ed9351;}

$(".turntableWap .table").css({"height":$(".turntableWap .table").width()});//做响应式布局，外table是等宽高

var isdo = true;

$(".zpBtn").on("click",function(){

 var num = 13;//后台传入的奖品

 var rotaNum = 14;//奖品数量

 var count = -1;//高亮显示，旋转特效

 var jishi = 0;//计时时间段

 var speed = 50;//快速速度

 var speedSlow = 200;//慢速速度

 choujiang()//抽奖方法调用，在此处做判断调用choujiang()，并给num值

 function choujiang(){

 if(isdo){

  isdo=false;

  $(".turntableWap").css({"background-image":"url(../images/1.gif)"})

  var c = setInterval(function(){

  if(count >12){

   count = -1;

  }

  count = count+1;

  jishi = jishi+1;

  $(".turntableWap td").removeClass("active");

  $(".turntableWap td[tag="+count+"]").addClass("active");

  if(jishi>rotaNum*2){

   clearInterval(c);

   c = setInterval(function(){

   count = count+1;

   jishi = jishi+1;

   $(".turntableWap td").removeClass("active");

   $(".turntableWap td[tag="+count+"]").addClass("active");

   if(jishi>num+rotaNum*2){

    clearInterval(c);

    $(".turntableWap").css({"background-image":"url(../images/zpTabBg.jpg)"})

    isdo = true;

    var jp = $(".turntableWap td[tag="+count+"]").find("img").attr("alt")

    alert("恭喜您获取"+jp)

   }

   },speedSlow)

  }

  },speed)

 }else{

  return;

 }

 }

})