用jquery通过配置参数实现抽奖转盘
1.html代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>抽奖活动</title>
<meta name="keyword" content="">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<script type="text/javascript" src="js/jquery.js"></script>
<!-- 业务样式 -->
<link rel="stylesheet" type="text/css" href="css/index.css">
<!--[if lt IE 9]>
<link rel="stylesheet" href="http://static.51offer.com/skin/css/study-abroad-steps/ie.css"/>
<script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="container_wrap">
<div class="container_left clearfix" id="zhuanpan">
<div class="zhuanpan">
<ul class="zhuanpan1">
<li class="libao"></li>
<li class="mobile_shell"></li>
<li class="note"></li>
<li class="better"></li>
<li class="quan"></li>
<li class="tshirt"></li>
</ul>
</div>
<img class="choujiang" src="img/choujiang.png">
<img class="have_choujiang" src="img/reward.png">
</div>
</div>
</div>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
2.调用的js
var config = {
"rollId": '#rollId', //外层divid
"rollBtn": ".rollBtn", //点击滚动的按钮--class
"rollList": ".rollList",
"pinIndex": 0, //滚动的起点
"speed": 200, //滚动的速度
"cycle": 0, //滚动的圈数
"fastCycle": 5, //快速滚动圈数
"rollResult": 4 //抽奖的结果
};
var Roll = function() {
var self = this;
self.config = config;
self.stopIndex = '';
self.isRolling = false;
self.timer = null;
self.ops = '';
self.rollId = '';
self.rollBtn = '';
self.rollList = '';
self.rollIndex = 0;
}
var roll=new Roll();
$(function(){
$(".choujiang").on("click",function(){
rollFun(4);
});
})
function rollFun(prize_code) {
roll.init({
"rollId": '#zhuanpan',
"rollBtn": ".choujiang",
"rollList": ".zhuanpan1",
"pinIndex": 0,
"rollResult": prize_code
});
roll.start();
}
Roll.prototype.init = function(options) {
var self = this;
self.ops = $.extend({}, self.config, options);
self.rollId = $(self.ops.rollId);
self.rollBtn = self.rollId.find(self.ops.rollBtn);
self.rollList = self.rollId.find(self.ops.rollList).find('li');
self.stopIndex = self.ops.rollResult;
};
// 按钮事件
Roll.prototype.start = function() {
this.rollPre();
};
Roll.prototype.rollPre = function() {
var self = this;
if (!self.isRolling) {
self.rollList.eq(self.ops.pinIndex).show().siblings().hide();
rollStart(self); // 开始启动转盘
}
};
// 指向下一个
function rollGoNext(self) {
self.rollIndex += 1;
if (self.rollIndex > self.rollList.length) {
self.rollIndex = 0;
self.ops.cycle++;
}
self.rollList.eq(self.rollIndex).show().siblings().hide();
}
// 停止转动
function rollStop(self) {
clearInterval(self.timer);
(function stopGoNext() {
if (self.rollIndex !== self.stopIndex) {
rollGoNext(self);
setTimeout(function() {
stopGoNext();
}, 300);
} else {
self.isRolling = false;
self.ops.cycle = 0;
self.rollIndex = 0;
$(".choujiang").hide();
$(".have_choujiang").show();
// self.ev.trigger('succeed', {
// rollResult: self.stopIndex
// });
}
})();
}
//开始转动
function rollStart(self) {
self.isRolling = true;
self.timer = setInterval(function() {
rollGoNext(self);
if (self.rollIndex == 5) {
clearInterval(self.timer);
self.ops.speed = 20;
self.timer = setInterval(function() {
rollGoNext(self);
if (self.ops.cycle >= 5) {
clearInterval(self.timer);
self.ops.speed = 200;
self.timer = setInterval(function() {
if (self.ops.cycle === 6) {
rollStop(self);
} else {
rollGoNext(self);
}
}, self.ops.speed);
}
}, self.ops.speed);
}
}, self.ops.speed);
}
3.效果图
源代码：https://files.cnblogs.com/files/gzx618/roll.zip