原生的轮播，能够很好的吧思维逻辑梳理清楚，更好的掌握好原生，其中的图片随便找六张就可以
效果图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
*{padding:0; margin: 0;}
#banner{width: 989px; height: 300px; margin: 0 auto; position: relative;}
#banner img{width: 989px; height: 300px;}
#banner p{height: 39px; width: 989px; background-color: #000; opacity: 0.5; position: absolute; left: 0; bottom:0;}
#banner div a{display: inline-block; width: 26px; height: 26px; border-radius:13px; background-color: #9f9f9e; color:#fff; font-weight:bold; text-decoration: none; text-align: center; line-height: 26px;}
#banner div{position: absolute; right:400px; bottom:7px;}
/*#banner div a:hover{background-color: #f00;}*/
#banner div a.hov{background-color: #f00;}
</style>
</head>
<body>
<div id="banner">
<p></p>
<div>
<a href="#" class="hov">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
</div>
</div>
<script>
//获取要用到的元素
var imgEle = document.getElementById("banner").children[0];
var as = document.getElementById("banner").children[2].children;
// index全局变量，担任了轮播的序列数以及把下标赋值它，为了使mouseout的时候，不会再原来轮播的基础上走下标，而是在离开的位置上继续做下标
var index = 1;
var No = 0;
function changeImg(){
No = setInterval(function(){
index++;
if (index>6) {
index = 1;
}
imgEle.src = "images/banner"+index+".png";
changa(index-1);
},1000)
}
//清除a样式封装函数
function changa(suoyin){
for(var i = 0; i<as.length;i++){
as[i].className = "";
}
as[suoyin].className = "hov";
}
// 遍历所有的a标签
for(var j = 0; j<as.length; j++){
as[j].suoyin = j;
as[j].onmouseover = function(){
//鼠标移到上面首先停止定时器
clearInterval(No);
//只有移动到对应的数字上，有样式，其他没有样式
changa(this.suoyin);
//把下标赋值给index，为了mouseout 的时候，是在鼠标离开的基础上继续往后走的，而不是在它自己的原来的路径上录播
index = this.suoyin+1;
imgEle.src = "images/banner"+index+".png";
}
//鼠标离开重新启动定时器
as[j].onmouseout = function(){
changeImg();
}
}
changeImg();
</script>
</body>
</html>
只要有清晰的思路，轮播其实很轻松
