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