1. //html
    3. <div class="all clearfix">
    4.       <div class="title"></div>
    5.       <div class="information"></div>
    6.       <div class="drawBox">
    7.         <ul>
    8.           <li v-for="(item, index) in noticeList" :key="index">
    9.             <img :src="item.pri" alt="" />
    10.           </li>
    11.         </ul>
    12.         <div class="buttom"></div>
    13.       </div>
    14.       //复制一遍作为蒙板
    15.       <div class="drawBox">
    16.         <ul>
    17.           <li
    18.             v-for="(item, i) in noticeList"
    19.             :class="i == index ? 'on' : ''"
    20.             :key="i"
    21.           ></li>
    22.         </ul>
    23.         <div class="buttom" @click="turnToFn"></div>
    24.       </div>
    25.     </div>
    1. js
    3. data(){
    4.     return{
    5.             index: 0, // 当前转动到哪个位置，起点位置
    6.       count: 8, // 总共有多少个位置
    7.       timer: 0, // 每次转动定时器
    8.       speed: 200, // 初始转动速度
    9.       times: 0, // 转动次数
    10.       cycle: 50, // 转动基本次数：即至少需要转动多少次再进入抽奖环节
    11.       prize: -1, // 中奖位置
    12.     }
    13. }
    16. methods:{ 
    17.         /**
    18.      * 大转盘
    19.      * * */
    20.     turnToFn: function () {
    21.       console.log("asdas"); 
    22.       this.speed = 200; //每次抽奖速度初始化为200 
    23.       this.prize = 3; //中奖位置赋值，跑马灯最终停留位置，这里实际位置需要-1
    24.       this.startRoll(); //执行抽奖 
    25.     },
    26.     startRoll() {
    27.         this.times += 1; // 转动次数
    28.         this.oneRoll(); // 转动过程调用的每一次转动方法，这里是第一次调用初始化 
    29.         this.usePrize();
    30.     },
    31.     // 每一次转动
    32.     oneRoll() {
    33.         let index = this.index; // 当前转动到哪个位置
    34.         const count = 8; // 总共有多少个位置
    35.         index += 1;
    36.         if (index > count - 1) {
    37.             index = 0;
    38.         }
    39.         this.index = index; 
    40.     },
    41.     usePrize(){
    42.         // 如果当前转动次数达到要求 && 目前转到的位置是中奖位置
    43.         if (this.times > this.cycle +10 && this.prize === this.index) {
    44.             clearTimeout(this.timer); // 清除转动定时器
    45.             clearTimeout(this.lamp); // 清除灯光定时器
    46.             this.lampShow = false; // 白色灯隐藏
    47.             this.times = 0; // 转动跑格子次数初始化为0，可以开始下次抽奖 
    48.         } else {
    49.             if(this.times < this.cycle -20){
    50.                 this.speed -= 4; // 加快转动速度
    51.             }else{
    52.                 this.speed += 10; // 抽奖即将结束，放慢转动速度
    53.             }
    54.             this.timer = setTimeout(this.startRoll, this.speed);//开始转动
    55.         } 
    56.     },
    57. }