js代码
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.rotate.min.js" ></script> <script type="text/javascript" src="js/swiper-3.4.2.jquery.min.js" ></script> <script> //只需要更换turnplate的id就可以更换相应的奖品 var turnplate={ restaraunts:["iphone x", "100话费红包", "周大福吊坠", "50个赠币", "爱奇艺月卡", "1个赠币", "欧乐B牙刷", "1个积分"], //大转盘奖品名称 rotateFlag:false, //false:停止;ture:旋转 id:1 //抽中的id 1:iphone x 2:100话费红包 3:周大福吊坠 ...... }; $(document).ready(function(){ //旋转转盘 item:奖品位置; txt:提示语; var rotateFn = function (item, txt){ var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length*2)); if(angles<270){ angles = 270 - angles; }else{ angles = 360 - angles + 270; } $('.turntable_box').stopRotate(); $('.turntable_box').rotate({ angle:0, animateTo:angles+1800+22.5, duration:8000, callback:function (){ alert(txt); turnplate.rotateFlag = !turnplate.rotateFlag; } }); }; $('.pointer').click(function (){ if(turnplate.rotateFlag)return; turnplate.rotateFlag = !turnplate.rotateFlag; var item = turnplate.id; //指针落在对应奖品区域的中心角度 rotateFn(item-2, turnplate.restaraunts[item-1]); //console.log(item); }); var swiper = new Swiper('.list', { direction: 'vertical', autoplay: true, speed:1300, loop:true }); }); </script>