原生的輪播，能夠很好的吧思維邏輯梳理清楚，更好的掌握好原生，其中的圖片隨便找六張就可以
效果圖
<!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全局變量，擔(dān)任了輪播的序列數(shù)以及把下標(biāo)賦值它，為了使mouseout的時(shí)候，不會(huì)再原來(lái)輪播的基礎(chǔ)上走下標(biāo)，而是在離開(kāi)的位置上繼續(xù)做下標(biāo)
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樣式封裝函數(shù)
function changa(suoyin){
for(var i = 0; i<as.length;i++){
as[i].className = "";
}
as[suoyin].className = "hov";
}
// 遍歷所有的a標(biāo)簽
for(var j = 0; j<as.length; j++){
as[j].suoyin = j;
as[j].onmouseover = function(){
//鼠標(biāo)移到上面首先停止定時(shí)器
clearInterval(No);
//只有移動(dòng)到對(duì)應(yīng)的數(shù)字上，有樣式，其他沒(méi)有樣式
changa(this.suoyin);
//把下標(biāo)賦值給index，為了mouseout 的時(shí)候，是在鼠標(biāo)離開(kāi)的基礎(chǔ)上繼續(xù)往后走的，而不是在它自己的原來(lái)的路徑上錄播
index = this.suoyin+1;
imgEle.src = "images/banner"+index+".png";
}
//鼠標(biāo)離開(kāi)重新啟動(dòng)定時(shí)器
as[j].onmouseout = function(){
changeImg();
}
}
changeImg();
</script>
</body>
</html>
只要有清晰的思路，輪播其實(shí)很輕松
