先看效果：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>转盘抽奖二</title>
<style>
*{margin:0;padding: 0;}
#lottery{width:570px;height:510px;margin:0px auto;border:4px solid #ba1809;}
#lottery table{background-color:yellow;}
#lottery table td{position:relative;width:190px;height:170px;text-align:center;color:#333;font-index:-999}
#lottery table td img{display:block;width:190px;height:170px;}
#lottery table td a{width:190px;height:170px;display:block;text-decoration:none;background:url('./img/lottery1.jpg') no-repeat top center;}
#lottery table td a:hover{background-image:url('./img/lottery2.jpg');}
#lottery table td.active .mask{display:block;}
.mask{width:100%;height:100%;position:absolute;left:0;top:0;background-color: rgba(252,211,4,0.5); display:none; }
</style>
</head>
<body>
<div id="lottery">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="lottery-unit lottery-unit-0"><img src="./img/gift0.jpg"><div class="mask"></div></td>
<td class="lottery-unit lottery-unit-1"><img src="./img/gift1.jpg"><div class="mask"></div></td>
<td class="lottery-unit lottery-unit-2"><img src="./img/gift2.jpg"><div class="mask"></div></td>
</tr>
<tr>
<td class="lottery-unit lottery-unit-7"><img src="./img/gift7.jpg"><div class="mask"></div></td>
<td><a href="#"></a></td>
<td class="lottery-unit lottery-unit-3"><img src="./img/gift3.jpg"><div class="mask"></div></td>
</tr>
<tr>
<td class="lottery-unit lottery-unit-6"><img src="./img/gift6.jpg"><div class="mask"></div></td>
<td class="lottery-unit lottery-unit-5"><img src="./img/gift5.jpg"><div class="mask"></div></td>
<td class="lottery-unit lottery-unit-4"><img src="./img/gift4.jpg"><div class="mask"></div></td>
</tr>
</table>
</div>
<script src="../js/jquery.1.10.0.js"></script>
<script>
$(function () {
var lottery = {
index: -1, //当前转动到哪个位置，起点位置
count: 0, //总共有多少个位置
timer: 0, //setTimeout的ID，用clearTimeout清除
speed: 20, //初始转动速度
times: 0, //转动次数
cycle: 50, //转动基本次数：即至少需要转动多少次再进入抽奖环节
prize: -1, //中奖位置
init: function (id) { //对象的入口方法
//节点检测
if ($("#" + id).find(".lottery-unit").length > 0) {
$lottery = $("#" + id); //抽奖转盘节点ID
$units = $lottery.find(".lottery-unit"); //奖品节点
this.obj = $lottery; //把抽奖转盘节点对象赋值给lottery对象的obj属性
this.count = $units.length; //把奖品节点的长度赋值给lottery的count属性
$lottery.find(".lottery-unit-" + this.index).addClass("active"); //给转盘当前位置添加当前状态
};
},
roll: function () { //转盘转动的方法
var index = this.index; //当前转动到的位置
var count = this.count; //位置总数
var lottery = this.obj; //抽奖转盘的节点
$(lottery).find(".lottery-unit-" + index).removeClass("active"); //每次转动前，先把当前的选择状态删除
index += 1; //将转动到的位置增加1
if (index > count - 1) { //判断如果当前转动到的位置大于奖品节点总长度-1，则让当前转动到的位置重置为0;
index = 0;
};
$(lottery).find(".lottery-unit-" + index).addClass("active"); //然后给当前转动到的位置添加当前状态
this.index = index; //把当前转动到的位置赋值给lottery对象的index属性
return false; //返回false,终止程序
},
stop: function (index) { //停止转动，返回中奖位置
this.prize = index;
return false; //返回false,终止程序
}
}; //定义一个转动的方法roll()
function roll() {
lottery.times += 1; //调用lottery对象的times属性并且在每次调用时加1
lottery.roll();//转动过程调用的是lottery的roll方法，这里是第一次调用初始化
//判断，如果转动次数大于转动基本次数加10（转动多少次后进入抽奖）并且中奖位置等于当前转动的位置的时候
if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
clearTimeout(lottery.timer); //清除转动的定时器
lottery.prize = -1; //重置prize属性为-1
lottery.times = 0; //重置转动次数times为0
click = false; //重置变量click为false;ps:click变量用来在点击抽奖后不能在点击抽奖按钮，防止造成定时器叠加
} else {
//否则，即转动次数times<=转动基本次数时并且中奖位置和当前转动位置不相等的时候 //判断如果转动次数小于转动基本数的时候
if (lottery.times < lottery.cycle) {
//让转动速度减少10并重新赋值给属性speed
lottery.speed -= 10; //否则如果，转动次数等于转动基本数的时候
} else if (lottery.times == lottery.cycle) { //转动基本数等于转动次数后产生抽奖结果
//通过一个随机数生成，把随机数赋值给新声明的变量index
var index = Math.random() * (lottery.count) | 0; //中奖物品通过一个随机数生成
lottery.prize = index; //把中间物品赋值给lottery对象的prize属性
} else {
//否则即转动次数大于转动基本数的时候 if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery.prize == lottery.index + 1)) {
lottery.speed += 110;
} else {
lottery.speed += 20;
}
}
if (lottery.speed < 40) {
lottery.speed = 40;
}; lottery.timer = setTimeout(roll, lottery.speed);//循环调用
};
return false;
};
//方法调用
var click = false;
lottery.init('lottery');
$("#lottery a").click(function () {
if (click) {//click控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应
return false;
} else {
lottery.speed = 100;
roll(); //转圈过程不响应click事件，会将click置为false
click = true; //一次抽奖完成后，设置click为true，可继续抽奖
return false;
};
});
});
</script>
</body>
</html>