图片轮播是很多网站都会用到的功能，接下来原生JS简易实现图片自动轮播
第一步：定义页面 html 结构：
说明：
1. 将class为banner 的div作为父容器；
3.slide1-slide4 用于定义每张轮播图的背景图片，若有更多图片进行追加即可
4.slide-active 定义当前显示图片，其他图片进行隐藏
第二步：定义CSS样式：
.banner {
width: 900px;
height: 440px;
}
.banner .banner-slide {
width: 900px;
height: 420px;
position: absolute;
display: none;
}
.banner .slide-active {
display: block;
}
.banner .slide1 {
background: url(img/1.jpg) center no-repeat;
}
.banner .slide2 {
background: url(img/3.jpg) center no-repeat;
}
.banner .slide3 {
background: url(img/4.jpg) center no-repeat;
}
.banner .slide4 {
background: url(img/5.jpg) center no-repeat;
}
注意： 1.banner-slide 要进行隐藏，display 设置为 none，并且position设为absolute
2.由于position设为absolute后，多张图片会进行堆叠，此时想要显示第一张图片，则需要将slide-active 添加在slide1上
第三步：编写JS脚本：
var img = document.getElementsByClassName('banner-slide'),
index=0,
timer;
timer=setInterval(function(){
index++;
if(index>=img.length){
index=0;
}
// 切换图片
changeImg();
},3000)
function changeImg(){
for(var i=0;i
脚本实现逻辑：
1.定义全局变量：
img = document.getElementsByClassName('banner-slide') 用于获取四张图片；
index=0 index作为操作图片的索引，初识值0；
timer 为定时器，后边会定义为setInterval 间歇调用；
2.封装changeImg 切换图片函数；
3.编写setInterval间歇调用函数；
效果如下，四张图片，每隔一秒钟进行自动切换：
