这几天在逛网站的时候，发明很多网站都有轮播图这个效果，所以我就模仿小米的官网用原生js写了一个轮播图效果，但愿大家喜欢。
这是我颁布在github上的最后实现的效果：https://heternally.github.io/...

下面我简单跟大家说一下我实现该效果的过程，如果有什么错误的处所，欢迎大家说出来，以便利大家互相学习。

我相信前面简单的html+css大家应该城市，我这里就不说了，简单给大家展示一下代码：

HTML部分

<div> <div> <div> <img src="http://www.mamicode.com/images/1.jpg" alt="轮播图1"> </div> </div> <div> <div> <img src="http://www.mamicode.com/images/2.jpg" alt="轮播图2"> </div> </div> <div> <div> <img src="http://www.mamicode.com/images/3.jpg" alt="轮播图3"> </div> </div> <div> <div> <img src="http://www.mamicode.com/images/4.jpg" alt="轮播图4"> </div> </div> <div> <div> <img src="http://www.mamicode.com/images/5.jpg" alt="轮播图5"> </div> </div> <div> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div> </div> <div></div> </div>

css部分

* { margin:0; padding:0; } #wrap { position:relative; margin:20px auto; width:1226px; height:460px; } #wrap .banner { position:absolute; top:0; width:100%; height:100%; opacity:0; transition: opacity 2s; } #wrap .tab{ position:absolute; bottom:10px; right:10px; } #wrap .tab span{ display: inline-block; width:6px; height:6px; margin:3px; background:rgba(105,105,105,0.5); border-radius:50%; cursor: pointer; border:2px solid #887B6E; } #wrap .tab span.on{ background:#E2CEB7; } #wrap .tab span:hover{ background:#E2CEB7; } #wrap .prev { position:absolute; left:20px; top:210px; width:41px; height:69px; background: url("images/icon-slides.png") 82px; cursor:pointer; } #wrap .prev:hover{ background: url("images/icon-slides.png"); } #wrap .next { position:absolute; right:20px; top:210px; width:41px; height:69px; background: url("images/icon-slides.png") 41px; cursor:pointer; } #wrap .next:hover{ background: url("images/icon-slides.png") 123px; }

上面的代码都很简单，稍微看看就可以了，下面开始重点说下js部分

首先我先获取各个节点，通过类名，ID等要领：

var oBody = document.getElementsByTagName("body")[0]; var aBanner = document.getElementsByClassName("banner"); var aSpan = document.getElementsByClassName("tab") [0].getElementsByTagName("span"); var oNext = document.getElementsByClassName("next")[0]; var Oprev = document.getElementsByClassName("prev")[0]; var Oon = document.getElementsByClassName("on")[0];

接下来是初始化界面，因为我在css里面设置了图片的不透明度opacity:0;所以我在实现轮播图前先使得第一张图片显示和第一个小圆点颜色为白色：

aBanner[0].style.opacity = "1"; aSpan[0].className = "on"; var num = 0;

然后就是设置前一张，后一张，小圆点的按钮效果了，实现点击小圆点，会使相对应的图片显示，点击前一张，会使前一张图片显示；后一张效果一样：

for(var i = 0;i < aSpan.length;i++){ aSpan[i].index = i; aSpan[i].onclick = function(){ //点击小圆点图片相对应的进行切换 for(var j = 0 ;j < aSpan.length; j++){ num = this.index; aSpan[j].className = ""; aBanner[j].style.opacity = "0"; } aSpan[num].className = "on"; aBanner[num].style.opacity = "1"; } oNext.onclick = function(){//按下图片切换到后一张 for(var j = 0 ;j < aSpan.length; j++){ if(aSpan[j].className == "on"){ aSpan[j].className = ""; aBanner[j].style.opacity = "0"; j++; num++; if(j > 4){ j = 0; } aSpan[j].className = "on"; aBanner[j].style.opacity = "1"; } } } Oprev.onclick = function(){ //按下图片切换到前一张 for(var j = 0 ;j < aSpan.length; j++){ if(aSpan[j].className == "on"){ aSpan[j].className = ""; aBanner[j].style.opacity = "0"; j--; num--; if(j < 0){ j = 4; } aSpan[j].className = "on"; aBanner[j].style.opacity = "1"; } } } }

在这部分给一个for循环，length为小圆点的个数，在这个循环中，先给每个圆点的下标值赋值，使得每个圆点对应一张图片；

然后编写点击圆点的函数，在函数中实现当前圆点的时候，获取当前的下标值，讲该值赋给全局变量num，将所以图片的opacity设置为o，去失所有圆点的"on"样式，然后将第num张图片的opacity设置为1，，添加"on"样式，这样就实现了点击圆点跳转到相应的图片。

同样的就可以实现向前向后按钮效果.

最后设置一个按时器的函数，实现图片轮播：

function Time(){/*设置按时器运行的函数*/ num++; if(num < 5){ for(var j = 0 ;j < aSpan.length; j++){ aSpan[j].className = ""; aBanner[j].style.opacity = "0"; } aSpan[num].className = "on"; aBanner[num].style.opacity = "1"; }else { num = -1; } } clearInterval(timer); var timer = setInterval("Time()",2000);/*挪用按时器*/ oBody.onmou搜索引擎优化ver = function(){/*鼠标引入，断根按时器，轮播图遏制*/ clearInterval(timer); }; oBody.onmou搜索引擎优化ut = function(){/*鼠标移出，从头挪用按时器，轮播图开始*/ clearInterval(timer); timer = setInterval("Time()",2000); };

在挪用按时器的时候，我用的使setInterval，或者你要使用setTimerout也是可以的；