素材牛VIP会员

大转盘移动端抽奖指定奖品+中奖名单轮播 [原创]

 所属分类:网页特效-游戏/抽奖

 浏览:2089次  评论:0次  更新时间:2019-01-19
牛币素材VIP可免积分下载
大转盘移动端抽奖指定奖品+中奖名单轮播 [原创]兼容IE10
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:切换至手机模式查看效果,指定奖品的大转盘抽奖,还有中奖轮播

详细介绍

注:请在移动端预览查看最佳展示效果!

使用方法

1.引入jquery.rotate.min.js用于大转盘的旋转

2.引入swiper.min.css和swiper.min.js用于中奖名单轮播

<link rel="stylesheet" href="css/swiper.min.css" />
<script type="text/javascript" src="js/swiper-3.4.2.jquery.min.js" ></script>

3.只需要更换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:周大福吊坠 ......
};

文件目录结构

  • css
    • ┝ index.css
    • ┝ swiper.min.css
  • img
    • ┝ inner.png
    • ┝ iphonex.png
    • ┝ point.png
    • ┝ turntable_zj.png
  • ┝ index.html
  • js
    • ┝ jquery-3.2.1.js
    • ┝ jquery.rotate.min.js
    • ┝ swiper-3.4.2.jquery.min.js

相关素材 - 游戏/抽奖

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:10 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)