第十次前端作业
这波博客确实鸽了好久,一直在忙别的事。享受、珍惜这总结、写文案的时刻。
第十次前端作业,这里要求做一个图片轮播和鼠标悬浮切换图片的效果。
html部分代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.change{
margin-top: 30px;
}
button{
width: 70px;
padding: 5px;
color: grey;
}
.cycle{
margin-top: 30px;
margin-bottom: 20px;
}
/* .bo{
position: absolute;
top: 430px;
} */
</style>
<script type="text/javascript" src="aaa.js"></script>
</head>
<body>
<div class="cycle" align="center">
<img src="images1/love1.jpg" id="img1">
</div>
<div align="center" >
<span><button id="b1">start</button></span>
<span><button id="b2">pause</button></span>
<!-- <img src="images1/love1.jpg" id="img1"> -->
</div>
<div align="center">
<div class="change">
<img src="images2/dl1.jpg"
onmouseover="this.src='images2/dl1d.jpg'"
onmouseout="this.src='images2/dl1.jpg'">
</div>
</div>
</body>
</html>
JavaScript部分代码
window.onload = function () {
var img1 = document.getElementById("img1");
var imgArr = ["images1/love1.jpg", "images1/love2.jpg", "images1/love3.jpg", "images1/love4.jpg", "images1/love5.jpg"];
// 定义一个图片列表
var index = 0;
// 创建一个图片索引变量
var timer;
// 创建一个变量来保存定时器标识
var b1 = document.getElementById("b1");
// 为b1绑定一个单击相应函数
b1.onclick = function () {
clearInterval(timer)
// clear的意思是清除之前已有的计时器,重新设置一个
// 开启一个计时器,来回切换图片
timer = setInterval(() => {
// 如上一行,set的意思是定义一个新计时器
index++;
// 判断索引是否超过最大值,这里的方法很巧妙
index = index % imgArr.length
img1.src = imgArr[index]
}, 1000);
// 1000指的是1000毫秒,即每秒切换一次
}
var b2 = document.getElementById("b2")
// 为b2绑定一个单击响应函数
b2.onclick = function () {
clearInterval(timer)
}
}
效果图如下