JavaScript实现抽奖（jQuery）
效果展示：
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery实现抽奖</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
var imgs=["01.png","02.png","03.png","04.png","05.png"];
var startId;//开始定时器的id
var index;//随机角标
$(function(){
//处理按钮是否可以使用的效果
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
//给开始按钮绑定单击事件
$("#startID").click(function(){
//定义循环定时器20毫秒执行一次
startId=setInterval(function(){
//处理按钮是否可以使用的效果
$("#startID").prop("disabled",true);
$("#stopID").prop("disabled",false);
//随机生成角标0-4
index=Math.floor(Math.random()*5);
//设置小相框的src属性
$("#img1ID").prop("src",imgs[index]);
},20);
});
//给结束按钮绑定单击事件
$("#stopID").click(function(){
//处理按钮是否可以使用的效果
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
//停止定时器
clearInterval(startId);
//给大相框设置src属性
$("#img2ID").prop("src",imgs[index]);
// //大相框以某种效果出来，设置动画即可。
// $("#img2ID").prop("src",imgs[index]).hide();
// //动画的显示速度
// $("#img2ID").show(5000);
});
})
</script>
<!-- 小像框 -->
<div style="border-style:dotted;width:299px;height:249px">
<img id="img1ID" src="01.png" style="width:299px;height:249px"/>
</div>
<!-- 大像框 -->
<div style="border-style:double;width:598px;height:498px;position:absolute;left:500px;top:10px">
<img id="img2ID" src="01.png" width="598px" height="498px"/>
</div>
<!-- 开始按钮 -->
<input id="startID" type="button" value="点击开始" style="width:150px;height:150px;font-size:22px">
<!-- 停止按钮 -->
<input id="stopID" type="button" value="点击停止" style="width:150px;height:150px;font-size:22px">
</body>
</html>
我的这个是5个图片循环的，可以参考做出响应修改。
还可以自己添加一些图片的动画效果。