js轮播图升级版
<!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>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 400px;
height: 400px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
img {
width: 400px;
height: 400px;
}
p {
position: absolute;
bottom: 10px;
}
p span {
display: inline-block;
border: 10px solid #ccc;
border-radius: 50%;
}
.active {
border-color: skyblue;
}
</style>
</head>
<body>
<div>
<img src="./image/p1.jpg" alt="">
<p></p>
</div>
<script>
//注意pp是一个集合,尽管里面只有一个元素
var pp = document.getElementsByTagName("p");
var imgs = document.getElementsByTagName("img");
var arr = ["image/p1.jpg", "image/p2.jpg", "image/p3.jpg", "image/p4.jpg", "image/p5.jpg"];
var str = "";
//有几张图片,就“创造”几个小圆点
for (i = 0; i < arr.length; i++) {
//每次输出一个span标签,把所有的span标签都存到str里面。
str += "<span></span>";
}
//把span标签写到body里的p标签里面
pp[0].innerHTML = str;
//现在要划过哪个span标签(小圆点),显示相应的图片
var spans = document.getElementsByTagName("span");
spans[0].className = "active";
for (i = 0; i < spans.length; i++) {
spans[i].index = i;
spans[i].onmousemove = function () {
for (i = 0; i < arr.length; i++) {
spans[i].className = "";
}
this.className = "active";
imgs[0].src = arr[this.index];
}
}
</script>
</body>
</html>
主要是利用js把span标签(其他标签也可以,但是样式可能要修改)写到body里,这个比较简单,
最需要数以的是getElementsByTagName获取的元素是一个集合形式的,哪怕里面只有一个元素也是集合形式的。