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>抽獎(jiǎng)</title>
<script src="js/jquery-3.2.1.js"></script>
<script>
/*
分析：
1.給開(kāi)始按鈕綁定單擊事件
1.1 定義循環(huán)定時(shí)器
1.2 切換小相框的src屬性
* 定義數(shù)組丽已，存放圖片資源路徑
* 生成隨機(jī)數(shù)。數(shù)組索引
2.給結(jié)束按鈕綁定單擊事件
2.1 停止定時(shí)器
2.2 給大相框設(shè)置src屬性
*/
var imgs = ["./img/01.jpg",
"./img/02.jpg",
"./img/03.jpg",
"./img/04.jpg"
]
var startId; //開(kāi)始定時(shí)器的id
var index; // 隨機(jī)角標(biāo)
$(function(){
// 處理按鈕是否可以使用的效果
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
// 1.給開(kāi)始按鈕綁定單擊事件
$("#startID").click(function(){
// 處理按鈕是否可以使用的效果
$("#startID").prop("disabled",true);
$("#stopID").prop("disabled",false);
// 1.1 定義循環(huán)定時(shí)器 20毫秒執(zhí)行一次
startId = setInterval(function(){
// 1.2生成隨機(jī)角標(biāo) 1-4
index = Math.floor(Math.random() * 3)+1;
// 1.3設(shè)置小相框的src屬性
$("#img1ID").prop("src",imgs[index])
}, 20);
});
// 2.給結(jié)束按鈕綁定單擊事件
$("#stopID").click(function(){
// 處理按鈕是否可以使用的效果
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
// 1.1 停止定時(shí)器
clearInterval(startId);
// 1.2 給大相框設(shè)置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>
<!-- 開(kāi)始按鈕 -->
<input type="button" id="startID" value="點(diǎn)擊開(kāi)始" style="width: 150px;height: 150px;font-size: 22px;">
<!-- 停止按鈕 -->
<input type="button" id="stopID" value="點(diǎn)擊停止" style="width: 150px;height: 150px;font-size: 22px;">
</body>
</html>
ps：如需使用代碼亏钩，注意代碼中的資源導(dǎo)入與路徑問(wèn)題
如有錯(cuò)誤或建議歡迎大家指出與評(píng)論哈，希望這篇博文能幫助到大家欺旧，大家也可以分享給需要的人姑丑。
如需轉(zhuǎn)載，請(qǐng)注明出處辞友。http://www.reibang.com/p/9bd527c54b8a
