用jquery通过配置参数实现抽奖转盘
1.html代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!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]>
<![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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
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.效果图
源代码：http://files.cnblogs.com/files/gzx618/roll.zip
894
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
