<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>抽奖案例</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#content{
width: 180px;
height: 120px;
border: 5px darkcyan dotted;
margin: 10px auto;
}
#content img{
width: 180px;
height: 120px;
}
#big{
clear: both;
width: 800px;
height: 550px;
margin: 10px auto;
border: 5px darksalmon double;
}
#big img{
width: 100%;
height: 100%;
}
#ctrl{
width: 300px;
overflow: hidden;
margin: 10px auto;
}
#start{
display: block;
width: 120px;
height: 50px;
float: left;
border: none;
background-color: green;
font-size: 18px;
color: white;
}
#stop{
display: block;
width: 120px;
height: 50px;
float: right;
border: none;
background-color: chocolate;
font-size: 18px;
color: white;
}
</style>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
//定义图片地址
var pic=["img/man00.jpg","img/man01.jpg","img/man02.jpg","img/man03.jpg",
"img/man04.jpg","img/man05.jpg","img/man06.jpg"]
//定义定时器
var interval;
//开始按钮
$("#start").click(function(){
//让开始按钮不可用
$(this).attr("disabled",true);
//让结束按钮可用
$("#stop").attr("disabled",false);
//定义定时器,随机数组的索引,然后根据索引取出数组中的图片地址,显示到div中
interval=setInterval(function(){
//1.随机数组的索引值
var n=Math.floor(Math.random()*pic.length);
//2.更改图片的地址
$("#content img").attr("src",pic[n]);
},20);
});
//结束按钮
$("#stop").click(function(){
//让结束按钮不可用
$(this).attr("disabled",true);
//让开始按钮可用
$("#start").attr("disabled",false);
//把定时器关闭
clearInterval(interval);
//停止的时候把大图片的地址也进行替换,替换成当前停止的时候的小图片的地址
var src=$("#content img").attr("src");
$("#big img").attr("src",src).hide();
$("#big img").slideDown(1000);
});
});
</script>
</head>
<body>
<div id="content">
<img src="img/man00.jpg" />
</div>
<div id="ctrl">
<button id="start">开始</button>
<button id="stop" disabled=true>结束</button>
</div>
<div id="big">
<img src="img/man00.jpg" />
</div>
</body>
</html>
使用JQuery完成的抽奖案例
于 2023-05-23 11:02:52 首次发布