Home > Web Front-end > JS Tutorial > Mobile Roulette Lottery Code Sharing_Javascript Skills

Mobile Roulette Lottery Code Sharing_Javascript Skills

WBOY
Release: 2016-05-16 15:39:45
Original
1707 people have browsed it

The demonstration effect is as follows:

No more nonsense, I will just post the code for everyone.

html part

<div class="turntableWap top10">
 <table border="0" cellspacing="0">
 <tr>
 <td tag="0"><img src="../images/4.png" alt="Mobile Roulette Lottery Code Sharing_Javascript Skills"></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" / alt="Mobile Roulette Lottery Code Sharing_Javascript Skills" ></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>
Copy after login

For the css part, since the carousel is for mobile phones, it uses a responsive layout

.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;}
Copy after login

js part

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

The above is the mobile carousel lottery code shared in this article. I hope you like it.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template