案例效果：
20200116.gif
案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>抽奖</title>
<script src="js/jquery-3.2.1.js"></script>
<script>
/*
分析：
1.给开始按钮绑定单击事件
1.1 定义循环定时器
1.2 切换小相框的src属性
* 定义数组，存放图片资源路径
* 生成随机数。数组索引
2.给结束按钮绑定单击事件
2.1 停止定时器
2.2 给大相框设置src属性
*/
var imgs = ["./img/01.jpg",
"./img/02.jpg",
"./img/03.jpg",
"./img/04.jpg"
]
var startId; //开始定时器的id
var index; // 随机角标
$(function(){
// 处理按钮是否可以使用的效果
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
// 1.给开始按钮绑定单击事件
$("#startID").click(function(){
// 处理按钮是否可以使用的效果
$("#startID").prop("disabled",true);
$("#stopID").prop("disabled",false);
// 1.1 定义循环定时器 20毫秒执行一次
startId = setInterval(function(){
// 1.2生成随机角标 1-4
index = Math.floor(Math.random() * 3)+1;
// 1.3设置小相框的src属性
$("#img1ID").prop("src",imgs[index])
}, 20);
});
// 2.给结束按钮绑定单击事件
$("#stopID").click(function(){
// 处理按钮是否可以使用的效果
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
// 1.1 停止定时器
clearInterval(startId);
// 1.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/01.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/01.jpg" style="width:800px;height:500px;" />
</div>
<!-- 开始按钮 -->
<input type="button" id="startID" value="点击开始" style="width: 150px;height: 150px;font-size: 22px;">
<!-- 停止按钮 -->
<input type="button" id="stopID" value="点击停止" style="width: 150px;height: 150px;font-size: 22px;">
</body>
</html>
ps：如需使用代码，注意代码中的资源导入与路径问题
如有错误或建议欢迎大家指出与评论哈，希望这篇博文能帮助到大家，大家也可以分享给需要的人。
如需转载，请注明出处。https://www.jianshu.com/p/9bd527c54b8a
网友评论