在我們做電商的主題活動(dòng)的時(shí)候英岭，經(jīng)常用到跑馬燈來(lái)吸引眼球哟绊，并用大轉(zhuǎn)盤(pán)來(lái)實(shí)現(xiàn)抽獎(jiǎng)的效果。
如何在微信小程序開(kāi)發(fā)中也能實(shí)現(xiàn)這樣的效果呢门怪？具體請(qǐng)看下面的講解骡澈。

需要實(shí)現(xiàn)的功能
1.實(shí)現(xiàn)類似天貓超市抽獎(jiǎng)的大轉(zhuǎn)盤(pán)
2.再實(shí)現(xiàn)跑馬燈效果
3.點(diǎn)擊START，開(kāi)始抽獎(jiǎng)掷空，抽獎(jiǎng)完成后有彈窗

先看效果圖

<!--index.wxml--> 
<view class="container-out">  
  <view  
  class="circle" wx:for="{{circleList}}"  
  style="top:{{item.topCircle}}rpx;left:{{item.leftCircle}}rpx;background-color: {{(index%2==0)?colorCircleFirst:colorCircleSecond}};"></view>  
  <view class="container-in">  
    <view class="content-out" wx:for="{{awardList}}" style="top:{{item.topAward}}rpx;left:{{item.leftAward}}rpx;background-color: {{(index==indexSelect)?colorAwardSelect:colorAwardDefault}};">  
      <image class="award-image" src="{{item.imageAward}}"></image>  
    </view>  
    <view class="start-btn" bindtap="startGame" style=" background-color:{{isRunning?'#e7930a':'#ffe400'}}">START</view>  
  </view>  
</view>

下面是頁(yè)面的WXSS代碼：

/**index.wxss**/ 
   
.container-out {  
  height: 600rpx;  
  width: 650rpx;  
  background-color: #b136b9;  
  margin: 100rpx auto;  
  border-radius: 40rpx;  
  box-shadow: 0 10px 0 #871a8e;  
  position: relative;  
}  
   
.container-in {  
  width: 580rpx;  
  height: 530rpx;  
  background-color: #871a8e;  
  border-radius: 40rpx;  
  position: absolute;  
  left: 0;  
  right: 0;  
  top: 0;  
  bottom: 0;  
  margin: auto;  
}  
   
/**小圓球  
box-shadow: inset 3px 3px 3px #fff2af;*/ 
   
.circle {  
  position: absolute;  
  display: block;  
  border-radius: 50%;  
  height: 20rpx;  
  width: 20rpx;  
}  
   
.content-out {  
  position: absolute;  
  height: 150rpx;  
  width: 166.6666rpx;  
  background-color: #f5f0fc;  
  border-radius: 15rpx;  
  box-shadow: 0 5px 0 #d87fde;  
}  
   
/**居中 加粗*/ 
   
.start-btn {  
  position: absolute;  
  margin: auto;  
  top: 0;  
  left: 0;  
  bottom: 0;  
  right: 0;  
  border-radius: 15rpx;  
  height: 150rpx;  
  width: 166.6666rpx;  
  background-color: #ffe400;  
  box-shadow: 0 5px 0 #e7930a;  
  color: #f6251e;  
  text-align: center;  
  font-size: 55rpx;  
  font-weight: bolder;  
  line-height: 150rpx;  
}  
   
.award-image {  
  position: absolute;  
  margin: auto;  
  top: 0;  
  left: 0;  
  bottom: 0;  
  right: 0;  
  height: 140rpx;  
  width: 130rpx;  
}

下面是頁(yè)面的JS代碼：

//index.js  
//獲取應(yīng)用實(shí)例  
var app = getApp()  
Page({  
  data: {  
    circleList: [],//圓點(diǎn)數(shù)組  
    awardList: [],//獎(jiǎng)品數(shù)組  
    colorCircleFirst: '#FFDF2F',//圓點(diǎn)顏色1  
    colorCircleSecond: '#FE4D32',//圓點(diǎn)顏色2  
    colorAwardDefault: '#F5F0FC',//獎(jiǎng)品默認(rèn)顏色  
    colorAwardSelect: '#ffe400',//獎(jiǎng)品選中顏色  
    indexSelect: 0,//被選中的獎(jiǎng)品index  
    isRunning: false,//是否正在抽獎(jiǎng)  
    imageAward: [  
      '../../images/1.jpg',  
      '../../images/2.jpg',  
      '../../images/3.jpg',  
      '../../images/4.jpg',  
      '../../images/5.jpg',  
      '../../images/6.jpg',  
      '../../images/7.jpg',  
      '../../images/8.jpg',  
    ],//獎(jiǎng)品圖片數(shù)組  
  },  
   
  onLoad: function () {  
    var _this = this;  
    //圓點(diǎn)設(shè)置  
    var leftCircle = 7.5;  
    var topCircle = 7.5;  
    var circleList = [];  
    for (var i = 0; i < 24; i++) {  
      if (i == 0) {  
        topCircle = 15;  
        leftCircle = 15;  
      } else if (i < 6) {  
        topCircle = 7.5;  
        leftCircle = leftCircle + 102.5;  
      } else if (i == 6) {  
        topCircle = 15  
        leftCircle = 620;  
      } else if (i < 12) {  
        topCircle = topCircle + 94;  
        leftCircle = 620;  
      } else if (i == 12) {  
        topCircle = 565;  
        leftCircle = 620;  
      } else if (i < 18) {  
        topCircle = 570;  
        leftCircle = leftCircle - 102.5;  
      } else if (i == 18) {  
        topCircle = 565;  
        leftCircle = 15;  
      } else if (i < 24) {  
        topCircle = topCircle - 94;  
        leftCircle = 7.5;  
      } else {  
        return 
      }  
      circleList.push({ topCircle: topCircle, leftCircle: leftCircle });  
    }  
    this.setData({  
      circleList: circleList  
    })  
   
    //圓點(diǎn)閃爍  
    setInterval(function () {  
      if (_this.data.colorCircleFirst == '#FFDF2F') {  
        _this.setData({  
          colorCircleFirst: '#FE4D32',  
          colorCircleSecond: '#FFDF2F',  
        })  
      } else {  
        _this.setData({  
          colorCircleFirst: '#FFDF2F',  
          colorCircleSecond: '#FE4D32',  
        })  
      }  
    }, 500)//設(shè)置圓點(diǎn)閃爍的效果  
   
    //獎(jiǎng)品item設(shè)置  
    var awardList = [];  
    //間距,怎么順眼怎么設(shè)置吧.  
    var topAward = 25;  
    var leftAward = 25;  
    for (var j = 0; j < 8; j++) {  
      if (j == 0) {  
        topAward = 25;  
        leftAward = 25;  
      } else if (j < 3) {  
        topAward = topAward;  
        //166.6666是寬.15是間距.下同  
        leftAward = leftAward + 166.6666 + 15;  
      } else if (j < 5) {  
        leftAward = leftAward;  
        //150是高,15是間距,下同  
        topAward = topAward + 150 + 15;  
      } else if (j < 7) {  
        leftAward = leftAward - 166.6666 - 15;  
        topAward = topAward;  
      } else if (j < 8) {  
        leftAward = leftAward;  
        topAward = topAward - 150 - 15;  
      }  
      var imageAward = this.data.imageAward[j];  
      awardList.push({ topAward: topAward, leftAward: leftAward, imageAward: imageAward });  
    }  
    this.setData({  
      awardList: awardList  
    })  
  },  
   
  //開(kāi)始抽獎(jiǎng)  
  startGame: function () {  
    if (this.data.isRunning) return 
    this.setData({  
      isRunning: true 
    })  
    var _this = this;  
    var indexSelect = 0  
    var i = 0;  
    var timer = setInterval(function () {  
      indexSelect++;  
      //這里我只是簡(jiǎn)單粗暴用y=30*x+200函數(shù)做的處理.可根據(jù)自己的需求改變轉(zhuǎn)盤(pán)速度  
      i += 30;  
      if (i > 1000) {  
        //去除循環(huán)  
        clearInterval(timer)  
        //獲獎(jiǎng)提示  
   
        wx.showModal({  
          title: '恭喜您',  
          content: '獲得了第' + (_this.data.indexSelect + 1) + "個(gè)優(yōu)惠券",  
          showCancel: false,//去掉取消按鈕  
          success: function (res) {  
            if (res.confirm) {  
              _this.setData({  
                isRunning: false 
              })  
            }  
          }  
        })  
      }  
      indexSelect = indexSelect % 8;  
      _this.setData({  
        indexSelect: indexSelect  
      })  
    }, (200 + i))  
  }  
})