小程序中实现类似天猫抽奖的大转盘和跑马灯的效果

在我们做电商的主题活动的时候，经常用到跑马灯来吸引眼球，并用大转盘来实现抽奖的效果。
如何在微信小程序开发中也能实现这样的效果呢？具体请看下面的讲解。


需要实现的功能
1.实现类似天猫超市抽奖的大转盘
2.再实现跑马灯效果
3.点击START，开始抽奖，抽奖完成后有弹窗


先看效果图

下面是页面的WXML代码：

                                   START      

下面是页面的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;  }

下面是页面的JS代码：

//index.js  //获取应用实例  var app = getApp()  Page({    data: {      circleList: [],//圆点数组      awardList: [],//奖品数组      colorCircleFirst: '#FFDF2F',//圆点颜色1      colorCircleSecond: '#FE4D32',//圆点颜色2      colorAwardDefault: '#F5F0FC',//奖品默认颜色      colorAwardSelect: '#ffe400',//奖品选中颜色      indexSelect: 0,//被选中的奖品index      isRunning: false,//是否正在抽奖      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',      ],//奖品图片数组    },       onLoad: function () {

更多小程序中实现类似天猫抽奖的大转盘和跑马灯的效果相关文章请关注PHP中文网！