先把样式用html加css写出来
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://www.alixixi.com/script/jquery-1.8.3.min.js" type="text/javascript"></script>
<style type="text/css">
body,ul,li{
margin:0;
padding:0;
border:0;//清除浏览器原始的8像素
list-style:none;//把ul，li的格式清除
}
body{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;//字体类型
text-align:center; //字体居中
margin:0 auto;
background:#efefef;
}
.box{
padding:9px 0 0 11px;
width:759px;
height:611px;
background:#ccc;
margin:20px auto;
}
.inbox{
width:751px;
height:596px;
position:relative;//相对定位
}
#random_box li{
position:absolute; //绝对定位
width:144px;
overflow:hidden; //超出的部分隐藏
height:144px;
border:3px solid #c7c5ca;
background:#fff;
}
#random_box li img{
width:144px;
display:block;
height:144px;
}
.ok{
display:block; //行级元素变成块级元素
width:442px;
height:294px;
background:#c00;
color:#fff;
font-size:48px;
position:absolute;
top:150px;
left:150px;
cursor:pointer; //鼠标放在上面是小手
text-align:center;
line-height:280px;
}
#random_1{ left:0; top:0;}
#random_2{ left:148px;top:0;}
#random_3{ left:296px;top:0;}
#random_4{ left:444px;top:0;}
#random_5{ left:592px;top:0; }
#random_6{ left:592px;top:148px;}
#random_7{ left:592px; top:298px;}
#random_8{ left:592px; top:446px;}
#random_9{ left:444px; top:446px;}
#random_10{ left:296px; top:446px;}
#random_11{ left:148px; top:446px;}
#random_12{ left:0; top:446px;}
#random_13{ left:0; top:298px;}
#random_14{ left:0; top:148px;}
#random_box li.random_current{border:2px solid red;}
</style>
</head>
<body>
<div class="box">
<div class="inbox">
<ul id="random_box">
<li id="random_1"><img src="apple.jpg"></li>
<li id="random_2"><img src="dell燃7000.jpg"></li>
<li id="random_3"><img src="ipad2018.jpg"></li>
<li id="random_4"><img src="oppo r17.jpg"></li>
<li id="random_5"><img src="p20.jpg"></li>
<li id="random_6"><img src="vivo nex星迹版.jpg"></li>
<li id="random_7"><img src="华为nova3.jpg"></li>
<li id="random_8"><img src="坚果r1.jpg"></li>
<li id="random_9"><img src="外星人.jpg"></li>
<li id="random_10"><img src="小米6.jpg"></li>
<li id="random_11"><img src="小米6x.jpg"></li>
<li id="random_12"><img src="小米8.jpg"></li>
<li id="random_13"><img src="小米充电宝.jpg"></li>
<li id="random_14"><img src="小米手环3.jpg"></li>
</ul>
<b class="ok" onClick="StartGame()">抽奖</b>
</div>
</div>
</body>
</html>
这需要的注意的是，使用jquary必须先导入包，这里可以是网上的，也可以是本地的，本地的就在src后吧路径换了就行了。接下来就是写jquary里面的内容了
jquary代码
<script>
var index=1, //当前亮区位置，就是奖转到哪个位置
prevIndex=14, //前一位置，记住当前亮区的前一个位置，消除前一个选中状态
Speed=300, //初始速度，在定时器中用到，多少毫秒执行当前函数
Time, //定义对象
arr_length = 14; //GetSide(5,5) //初始化数组，此代码没用到数组，大致是数组的意思，就是14个抽奖块
EndIndex=1, //决定在哪一格处变慢
cycle=0, //转动圈数
EndCycle=3, //计算圈数
flag=false, //结束转动标志
random_num=1, //中奖数，
quick=0; //加速
//这里是对象的定义，可以定义多个变量
var isClick = true;//消除重复点击事件
function StartGame(){
if(isClick){
$("#random_box li").removeClass("random_current"); //取消选中，用jquary把亮的位置的样式消除
//random_num = parseInt($("#txtnum").val());
random_num = Math.floor(Math.random()*14+1); //产出随机中奖数1~14之间，这里可以控制，如果不想让那个奖选出来，（Math.random()是产生[0,1)的随机数，永远不会取到1。floor是向下取整）
//console.log(random_num);
index=1; //再来一次，从1开始
cycle=0;
flag=false;
//EndIndex=Math.floor(Math.random()*12);
if(random_num>5) {//产生随机数（就是中奖数字）的前五个让它速度变慢，最后停止
EndIndex = random_num - 5; //前五格开始变慢
} else {//这是一个圈，一共14个数，当前中奖数字位置的前五个数变慢
EndIndex = random_num + 14 - 5; //前五格开始变慢
}
//EndCycle=Math.floor(Math.random()*3);
Time = setInterval(Star,Speed);//设置定时器，让star函数为speed毫秒执行一次
isClick = false;//让此标志位变成false，防止重复点击事件，让事件越来越快
}
}
function Star(){
//跑马灯变速,开始，也就是没有结束
if(flag==false){
//走五格开始加速
if(quick==5){//走到第五格时开始加速
clearInterval(Time);//清除上一个定时器
Speed=50;
Time=setInterval(Star,Speed);//毫秒数变快，速度加快
}
//跑n圈减速
if(cycle==EndCycle+1 && index-1==EndIndex){//当全速等于cycle圈时，并且当当前亮区等于要减速的数时
clearInterval(Time);//清除定时器
Speed=300;
flag=true; //触发结束
Time=setInterval(Star,Speed);
}
}
if(index>arr_length){//如果当前亮区跟咱们的奖品个数相同）（也就是14个品），那就从头开始
index=1;
cycle++;
}
//结束转动，并选中号码
if(flag==true && index==parseInt(random_num)){ //当前转到的数等于产生的随机中奖数
quick=0;
clearInterval(Time);//清除定时器，此时抽奖停下
isClick = true;//可以重新点击star，重新开始抽奖
}
$("#random_"+index).addClass('random_current'); //设置当前选中样式
//永远将前一个样式清掉
if(index>1)
prevIndex=index-1;
else{
prevIndex=arr_length;
}
$("#random_"+prevIndex).removeClass('random_current'); //取消上次选中样式
index++;
quick++;
}
</script>
在相应的位置插入图片
清除重复点击事件bug
使用一个flag，在进行点击事件里面的内容之前先判断flag，当flag为true时执行以下代码。中间让flag一直为flase。在停止转动，这一次抽奖完毕时，让flag为true。