<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>show your choice</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
/*
分析：
1.给开始按钮绑定单击事件
1.1 定义循环定时器
1.2 切换小相框的src属性
* 定义一个数组，数组中存放图片资源的路径
* 生成随机数，随机数为数组索引
2.给结束按钮绑定单击事件
2.1 停止定时器
2.2 给大相框设置src属性
*/
var imgs = ["../img/1.jpg",
"../img/2.jpg",
"../img/3.jpg",
"../img/4.jpg",
"../img/5.jpg",
"../img/6.jpg",
"../img/7.jpg",
"../img/8.jpg",
"../img/9.jpg",
"../img/10.jpg",
"../img/11.jpg",
"../img/12.jpg",
"../img/13.jpg",
"../img/14.jpg",
"../img/15.jpg",
"../img/16.jpg",
"../img/17.jpg",
"../img/18.jpg",
"../img/19.jpg",
"../img/20.jpg",
"../img/21.jpg",
"../img/22.jpg",
"../img/23.jpg",
"../img/24.jpg",
"../img/25.jpg",
"../img/26.jpg",
"../img/27.jpg",
"../img/28.jpg",
"../img/29.jpg",
"../img/30.jpg"
];
var startId;//开始定时器的id
var index;//索引
$(function () {
//处理按钮是否可以使用的效果
$("#startID").prop("disabled", false);
$("#stopID").prop("disabled", true);
//1.给开始按钮绑定单击事件
$("#startID").click(function () {
//1.1 定义循环定时器 50ms执行一次
startId = setInterval(function () {
$("#startID").prop("disabled", true);
$("#stopID").prop("disabled", false);
//1.2 生成随机角标0-10
index = Math.floor(Math.random() * 31);//有几个图片，就 * (图片个数+1)
//1.3 设置小相框的src属性
$("#img1ID").prop("src", imgs[index]);
}, 50);
});
//2.给结束按钮绑定单击事件
$("#stopID").click(function () {
$("#startID").prop("disabled", false);
$("#stopID").prop("disabled", true);
//2.1 停止定时器
clearInterval(startId);
//2.2 给大相框设置src属性
$("#img2ID").prop("src", imgs[index]).hide();
//1秒后显示
$("#img2ID").show(1000)
});
});
</script>
</head>
<body>
<!--小相框-->
<div style="border-style: dotted;width: 160px;height: 100px">
<img id="img1ID" src="../img/0.jpg" style="width: 160px;height: 100px"/>
</div>
<!--大相框-->
<div style="border-style: double;width: 800px;height: 500px;position: absolute;left: 500px;top: 10px">
<img id="img2ID" src="../img/0.jpg" style="width: 800px;height: 500px"/>
</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>
