这篇文章主要讲解了用jQuery实现抽奖程序的方法，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。
1. 主要需求
2. 素材页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽奖程序</title>
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<style type="text/css">
#small {
border: 1px solid blueviolet;
width: 75px;
height: 75px;
margin-bottom: 20px;
}
#smallPhoto {
width: 75px;
height: 75px;
}
#big {
border: 2px solid orangered;
width: 500px;
height: 500px;
position: absolute;
left: 300px;
top: 10px
}
#bigPhoto {
width: 500px;
height: 500px;
}
#btnStart {
width: 100px;
height: 100px;
font-size: 22px;
}
#btnStop {
width: 100px;
height: 100px;
font-size: 22px;
}
</style>
</head>
<body>
<!-- 小像框 -->
<div id="small">
<img id="smallPhoto" src="../img/man00.png"/>
</div>
<!-- 大像框 -->
<div id="big">
<img id="bigPhoto" src="../img/begin.jpg" />
</div>
<input id="btnStart" type="button" value="点击开始"/>
<input id="btnStop" type="button" value="点击停止"/ disabled>
<script type="text/javascript">
</script>
</body>
</html>3. 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽奖程序</title>
<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
<style type="text/css">
#small {
border: 1px solid blueviolet;
width: 75px;
height: 75px;
margin-bottom: 20px;
}
#smallPhoto {
width: 75px;
height: 75px;
}
#big {
border: 2px solid orangered;
width: 500px;
height: 500px;
position: absolute;
left: 300px;
top: 10px
}
#bigPhoto {
width: 500px;
height: 500px;
}
#btnStart {
width: 100px;
height: 100px;
font-size: 22px;
}
#btnStop {
width: 100px;
height: 100px;
font-size: 22px;
}
</style>
</head>
<body>
<!-- 小像框 -->
<div id="small">
<img id="smallPhoto" src="../img/man00.jpg"/>
</div>
<!-- 大像框 -->
<div id="big">
<img id="bigPhoto" src="../img/begin.jpg" />
</div>
<input id="btnStart" type="button" value="开始" onclick="gameStart()">
<input id="btnStop" type="button" value="停止" disabled onclick="gameOver()">
<script type="text/javascript">
//初始化抽奖的名单（图片地址）
let imgs = [
"../img/man00.jpg",
"../img/man01.jpg",
"../img/man02.jpg",
"../img/man03.jpg",
"../img/man04.jpg",
"../img/man05.jpg",
"../img/man06.jpg",
];
//定时器序号
let counter = null;
//点击开始
function gameStart() {
//开始按钮禁用
$("#btnStart").prop("disabled",true);
//停止按钮可用
$("#btnStop").prop("disabled",false);
//定义计数变量
let num = 0;
//使用定时器实现小图框快速切换图片
counter = setInterval(function () {
//通过取余，循环得到数组得到索引
let index = num%imgs.length;
//修改小图框中img的src即可
$("#smallPhoto").attr("src",imgs[index]);
//计数变量自增
num++;
},20);
}
//点击结束
function gameOver() {
//禁用结束按钮
$("#btnStop").prop("disabled",true);
//取消开始按钮的禁用
$("#btnStart").prop("disabled",false);
//停止小图框的抽奖(停止定时器)
clearInterval(counter);
//将计算变量重置为0
num = 0;
//获取小图框图片地址
let imgUrl = $("#smallPhoto").attr("src");
//将抽奖结果显示在大图框中，并隐藏起来
$("#bigPhoto").attr("src",imgUrl).hide();
//将图片进行淡出
$("#bigPhoto").fadeIn(2000);
}
</script>
</body>
</html>示例素材：
看完上述内容，是不是对用jQuery实现抽奖程序的方法有进一步的了解，如果还想学习更多内容，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
