原生js实现自动轮播图

<p id="banner">
 <ul id="img-list"> 
 
 <li><img src="images/banner1.png" alt="1"/></li>
 <li><img src="images/banner2.jpg" alt="2"/></li>
 <li><img src="images/banner3.png" alt="3"/></li>

 </ul>
 <p id="list">
 <span index="1" class="on"></span>
 <span index="2"></span>
 <span index="3"></span>
 </p>
</p>

#banner {
 width:100%;
 padding:0;
 clear: both;
 position: relative;
 height: 400px;
 z-index:1;
}

#img-list {
 display: block;
 width:5760px;
 height: 400px;
 overflow: hidden;
 z-index:1;
 position: relative;
}
#img-list li{
 float: left;
 width:100%;
 height: 400px;
 overflow: hidden;
 /* position: absolute;
 top:0;
 left:0; */
 z-index: 2;
}
#list {
 width:100%;
 height:18px;
 text-align: center;
 position: absolute;
 bottom: 10px;
 z-index: 100;
}
#list > span {
 width:18px;
 height: 18px;
 overflow: hidden;
 display: inline-block;
 margin:0 2px;
 background: url(../images/yuan.png);
 cursor: pointer;
}
#list .on {
 background: url(../images/huanyu.png);
}

var banner=document.getElementById('banner');
 var imglist=document.getElementById('img-list').getElementsByTagName("li");
 var list=document.getElementById('list').getElementsByTagName('span');
var index=0;
 var timer=null;
 //设置自动播放函数
 function autoPlay () {
 if (++index >= imglist.length) {index = 0};
 changeImg(index);
 }

 // 鼠标划过整个容器时停止自动播放
 banner.onmouseover = function () {
 clearInterval(timer);
 }

 // 鼠标离开整个容器时继续播放至下一张
 banner.onmouseout=function(){
 timer=setInterval(autoPlay,2000);
 }
 / 定义并调用自动播放函数
 timer = setInterval(autoPlay, 2000);

// 定义图片切换函数
 function changeImg (curIndex) {
 for (var i = 0; i < imglist.length; i++) {

 imglist[i].style.display = "none";
 list[i].className = "";
 }
 imglist[curIndex].style.display = "block";
 list[curIndex].className = "on";
 }

for (var i = 0; i < list.length; i++) {
 list[i].index=i;
 list[i].onmouseover = function () {
 clearInterval(timer);
 changeImg(this.index);
 };