大家对于实现轮播图都有什么办法呢？
今天我来介绍一种方法
用JS来实现
1.找几张你喜欢的图片
2.新建一个HTML页面
3.在body里面先添加一张图片
把图片的id值设为img1，同学们可以随便设置，宽高等可以根据自己的喜好来
<img id="img1" src="../img/banner_1.jpg" height="400" width="1500"/>
4.在body的下面新建一个script标签
这里因为我们要做轮播图，所以我们用循环定时器
定义一个循环定时器：每2s切换一张图片，一共四张图片，在循环定时器里面写一个函数叫changeImg()，定义一个变量 i 用来接受图片，把图片的路径赋值给图片的src值，图片每变化一次，我们让 i 自增，当 i 自增到4时，让 i 等于1，这样就可以一直不停地变化下去，达到轮播的效果。
//图片每2秒变化一次，一共四张图片
setInterval(changeImg,2000)
let i=1
function changeImg(){
if(i==4){
i=1
}
img1.src='../img/banner_'+i+'.jpg'
i++
}
js的小知识定时器
js的定时器分为两种
.一次性定时器：两种方法
- 开始一次性定时器：setTimeout()
- 清除一次性定时器：clearTimeout()
循环定时器：两种方法
- 开始循环定时器：setInterval()
- 清除循环定时器：clearInterval()
这样一个简单的皇帝选妃的案例就写好了~~~ 下面附上完整的代码~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
</head>
<body>
<img id="img1" src="../img/banner_1.jpg" height="400" width="1500"/>
</body>
<script>
//1.定义一个循环定时器：每2s切换一张图片
setInterval(changeImg,2000)
let i=1
function changeImg(){
if(i==4){
i=1
}
img1.src='../img/banner_'+i+'.jpg'
i++
}
</script>
</html>
