JS原生轮播图的做法
1.首先插入一张图片img src
2.插入script，在script中let一个新的数组用来装图片路径let arr = [
"http://p1.music.126.net/wyvOv3Ab5qh-xgj8st6VwA==/109951164864075445.jpg?imageView&quality=89",
"http://p1.music.126.net/S7d7PxiWQJqXoXWPV2M4tA==/109951164862761542.jpg?imageView&quality=89",
"http://p1.music.126.net/sD67Am6xn1g07CPHTaizUw==/109951164861401555.jpg?imageView&quality=89",
"http://p1.music.126.net/ZOtieDruj72io-LWc1lExw==/109951164861384947.jpg?imageView&quality=89"
]
3.由于我们知道通过改变数组中的图片可以实现轮播的效果，所以可以通过JS原生的.点出来即 html.src=arr[index]
（注意html是我对img的id命名，没有啥特殊含义）
4.通过setinterval((=>{
index++
if(index===arr.length){
index=0
}
html.src=arr[index]
},1000)可以实现每秒执行一次。此时的轮播图已经动起来了（还需要注意一下===和=的区别）
5.实现给轮播图上加小点
<ul class="tag">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
给小点设置样式： .tag{
width: 100px;
height: 20px;
background: red;
display: flex;
position: absolute;
left: 10px;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
li{
flex: 1;
width: 20px;
height: 20px;
background: black;
border-radius: 50%;
}
.active{
background:blue ;
}
此时还需要给父级盒子一个相对定位
<div style="position: relative; width: 500px;height: 250px;">
6.让小点居中
left: 50%;
transform: translateX(-50%);
7.通过JS获取active高亮
tag[index].classList.add('active')
8.移除多余的高亮部分
let active =document.getElementsByClassName('active')[0]
active.classList.remove('active')
此处为代码
<!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>原生JS轮播图</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.tag{
width: 100px;
height: 20px;
background: red;
display: flex;
position: absolute;
left: 10px;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
li{
flex: 1;
width: 20px;
height: 20px;
background: black;
border-radius: 50%;
}
.active{
background:blue ;
}
</style>
</head>
<body>
<div style="position: relative; width: 500px;height: 250px;">
<img id="app" src="http://p1.music.126.net/wyvOv3Ab5qh-xgj8st6VwA==/109951164864075445.jpg?imageView&quality=89" alt="">
<ul class="tag">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script>
let html = document.getElementById("app")
html.style['width']='500px'
html.style['height']='250px'
let tag = document.getElementsByClassName("tag")[0].children
console.log(tag)
let arr = [
"http://p1.music.126.net/wyvOv3Ab5qh-xgj8st6VwA==/109951164864075445.jpg?imageView&quality=89",
"http://p1.music.126.net/S7d7PxiWQJqXoXWPV2M4tA==/109951164862761542.jpg?imageView&quality=89",
"http://p1.music.126.net/sD67Am6xn1g07CPHTaizUw==/109951164861401555.jpg?imageView&quality=89",
"http://p1.music.126.net/ZOtieDruj72io-LWc1lExw==/109951164861384947.jpg?imageView&quality=89"
]
let index = 0
setInterval(()=>{
// 每隔多久执行
index++
if(index===arr.length){
index=0
}
html.src=arr[index]
let active =document.getElementsByClassName('active')[0]
active.classList.remove('active')
tag[index].classList.add('active')
},1000)
// setTimeout(()=>{
// 多久后执行
// })
</script>
</html>
