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>
示例素材：
