手機端轉盤抽獎代碼分享，轉盤抽獎代碼分享

手機端轉盤抽獎代碼分享，轉盤抽獎代碼分享

示範效果如下：

不廢話了，直接給大家貼代碼了。

html部分

<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>

css部分，由於做的這個轉盤是手機端的，採用的響應式布局

.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;}

js部分

$(".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; } }})

以上就是本文給大家分享的手機端轉盤抽獎代碼分享，希望大家喜歡。