Primero mira el efecto:
Al principio, "hacer clic para comenzar" está habilitado, el botón "hacer clic para detener" está deshabilitado;
haga clic en: el botón "hacer clic para comenzar", el botón "hacer clic para comenzar" está deshabilitado, el botón "hacer clic para detener" está habilitado, la parte superior izquierda la imagen de la esquina comienza a cambiar;
haga clic en: "haga clic para detener" Después del botón ", el" clic para comenzar "está habilitado y el botón" haga clic para detener "se desactiva; al mismo tiempo, la imagen superior izquierda deja de cambiar, y la imagen grande a la derecha muestra la imagen en la esquina superior izquierda.
Nota: Para utilizar este programa, debe importar el marco JQuery
#### Código de la página web:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽奖程序</title>
<style type="text/css">
#small {
border: 1px solid blueviolet;
width: 75px;
height: 75px;
margin-bottom: 20px;
}
#smallPhoto {
width: 75px;
height: 75px;
}
#big {
border: 2px solid orangered;
width: 500px;
height: 500px;
position: absolute;
left: 300px;
top: 10px
}
#bigPhoto {
width: 500px;
height: 500px;
}
#btnStart {
width: 100px;
height: 100px;
font-size: 22px;
}
#btnStop {
width: 100px;
height: 100px;
font-size: 22px;
}
</style>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<!-- 小像框 -->
<div id="small">
<img id="smallPhoto" src="img/man00.jpg"/>
</div>
<!-- 大像框 -->
<div id="big">
<img id="bigPhoto" src="img/man00.jpg"/>
</div>
<!-- 开始按钮 -->
<input id="btnStart" type="button" value="点击开始">
<!-- 停止按钮 -->
<input id="btnStop" type="button" value="点击停止" disabled="disabled">
<script type="text/javascript">
//准备一个一维数组，用户的图片的路径
var imgs = [
"img/man00.jpg",
"img/man01.jpg",
"img/man02.jpg",
"img/man03.jpg",
"img/man04.jpg",
"img/man05.jpg",
"img/man06.jpg"
];
// 索引号
var num = 0;
var timer;//计时器
// 开始按钮
$("#btnStart").click(function () {
//1. 点开始按钮，切换2个按钮的状态，一个可用，一个不可用
$(this).prop("disabled",true);//不可用
$("#btnStop").prop("disabled",false);//可用
//2. 不停的修改smallPhoto的src
//参数1：被调用的函数 参数2：过多久，毫秒。返回值就是计时器
timer = setInterval(function () {
//小图片
$("#smallPhoto").attr("src",imgs[num]);
num++;
//判断如果num = 数组的长度，设置num=0
if (num == imgs.length) {
num = 0;
}
},100);
});
// 停止按钮
$("#btnStop").click(function () {
//1. 切换按钮的状态
$("#btnStart").attr("disabled",false);
$("#btnStop").attr("disabled",true);
// 图片停止转换 清除计时器
clearInterval(timer);
// 将小图片 src 的地址赋值给大图片
$("#bigPhoto").attr("src",$("#smallPhoto").attr("src"));
// 使用动画
$("#bigPhoto").hide(); //隐藏
// 淡出
$("#bigPhoto").fadeIn(3000); // 时间
});
</script>
</body>
</html>