效果演示
具体实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {
$("#start").prop("disabled", false);
$("#end").prop("disabled", true);
var imgs = ["./image/test1.jpg",
"./image/test2.jpg",
"./image/test3.jpg"
];
var id;
var index;
$("#start").click(function () {
id = setInterval(function () {
index = Math.floor(Math.random() * 4);
$("#img1").prop("src", imgs[index]);
$("#start").prop("disabled", true);
$("#end").prop("disabled", false);
}, 20);
})
$("#end").click(function () {
clearInterval(id);
$("#img2").prop("src", imgs[index]);
$("#start").prop("disabled", false);
$("#end").prop("disabled", true);
});
})
</script>
</head>
<body>
<div style="border-style: dotted;width: 90px;height: 150px;">
<img id="img1" src="./image/test1.jpg" style="width: 90px;height: 150px;">
</div>
<div style="border-style:double; width:270px; height:450px">
<img id="img2" src="./image/test1.jpg" style="width:270px; height:450px">
</div>
<input id="start" type="button" value="点击开始" style="width: 150px;height: 100px;font-size: 30px;">
<input id="end" type="button" value="点击暂停" style="width: 150px;height: 100px;font-size: 30px;">
</body>
</html>