Vue走马灯抽奖效果

index.vue

<template>
  <div class="lottery" :style="cssVars">
    <div class="lottery_box">
      <div class="lottery_start lottery_item-all" @click="startLottery">
        <p class="start_tit"> <b>抽奖</b> </p>
        <p class="start_num">{
  { drawTimes }}次</p>
      </div>
      <div class="lottery_ul">
        <div class="lottery_item lottery_item-all" v-for="item in prizeList" :key="item.id"
          :class="item.id == index ? 'on' : ''">
          <img class="item_img" :src="item.img" alt="">
          <p class="item_title">{
  { item.title }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: Array,//奖品列表
    theme: Object,//抽奖主题
    drawTimes: Number,//抽奖次数
  },
  data() {
    return {
      index: 0,  // 当前转动到哪个位置，起点位置
      count: 8,  // 总共有多少个位置
      timer: 0,  // 每次转动定时器
      speed: 200,  // 初始转动速度
      times: 0,    // 转动次数
      cycle: 50,   // 转动基本次数：即至少需要