摘要：知乎原文我的博客微信公眾號這幾天在逛網(wǎng)站的時(shí)候，發(fā)現(xiàn)很多網(wǎng)站都有輪播圖這個(gè)效果，所以我就仿照小米的官網(wǎng)用原生寫了一個(gè)輪播圖效果，希望大家喜歡。

知乎原文 我的博客 微信公眾號
這幾天在逛網(wǎng)站的時(shí)候，發(fā)現(xiàn)很多網(wǎng)站都有輪播圖這個(gè)效果，所以我就仿照小米的官網(wǎng)用原生js寫了一個(gè)輪播圖效果，希望大家喜歡。
這是我發(fā)布在github上的最后實(shí)現(xiàn)的效果：https://heternally.github.io/...

下面我簡單跟大家說一下我實(shí)現(xiàn)該效果的過程，如果有什么錯(cuò)誤的地方，歡迎大家說出來，以方便大家互相學(xué)習(xí)。

我相信前面簡單的html+css大家應(yīng)該都會，我這里就不說了，簡單給大家展示一下代碼：

HTML部分

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;
}

上面的代碼都很簡單，稍微看看就可以了，下面開始重點(diǎn)說下js部分

首先我先獲取各個(gè)節(jié)點(diǎn)，通過類名，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];

接下來是初始化界面，因?yàn)槲以赾ss里面設(shè)置了圖片的不透明度opacity:0;所以我在實(shí)現(xiàn)輪播圖前先使得第一張圖片顯示和第一個(gè)小圓點(diǎn)顏色為白色：

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

然后就是設(shè)置前一張，后一張，小圓點(diǎn)的按鈕效果了，實(shí)現(xiàn)點(diǎn)擊小圓點(diǎn)，會使相對應(yīng)的圖片顯示，點(diǎn)擊前一張，會使前一張圖片顯示；后一張效果一樣：

for(var i = 0;i < aSpan.length;i++){
aSpan[i].index = i;
aSpan[i].onclick = function(){  //點(diǎn)擊小圓點(diǎn)圖片相對應(yīng)的進(jìn)行切換
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";

  }
}
}  
}

在這部分給一個(gè)for循環(huán)，length為小圓點(diǎn)的個(gè)數(shù)，在這個(gè)循環(huán)中，先給每個(gè)圓點(diǎn)的下標(biāo)值賦值，使得每個(gè)圓點(diǎn)對應(yīng)一張圖片；

然后編寫點(diǎn)擊圓點(diǎn)的函數(shù)，在函數(shù)中實(shí)現(xiàn)當(dāng)前圓點(diǎn)的時(shí)候，獲取當(dāng)前的下標(biāo)值，講該值賦給全局變量num，將所以圖片的opacity設(shè)置為o，去掉所有圓點(diǎn)的"on"樣式，然后將第num張圖片的opacity設(shè)置為1，添加"on"樣式，這樣就實(shí)現(xiàn)了點(diǎn)擊圓點(diǎn)跳轉(zhuǎn)到相應(yīng)的圖片。

同樣的就可以實(shí)現(xiàn)向前向后按鈕效果.

最后設(shè)置一個(gè)定時(shí)器的函數(shù)，實(shí)現(xiàn)圖片輪播：

function Time(){/*設(shè)置定時(shí)器運(yùn)行的函數(shù)*/
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);/*調(diào)用定時(shí)器*/

oBody.onmouseover = function(){/*鼠標(biāo)引入，清除定時(shí)器，輪播圖停止*/
    clearInterval(timer);
};
oBody.onmouseout = function(){/*鼠標(biāo)移出，重新調(diào)用定時(shí)器，輪播圖開始*/
    clearInterval(timer);
     timer = setInterval("Time()",2000);
};

在調(diào)用定時(shí)器的時(shí)候，我用的使setInterval，或者你要使用setTimerout也是可以的；

在調(diào)用定時(shí)器要先清除定時(shí)器，不然會讓定時(shí)器一直疊加，使得輪播速度越來越快；我還加了當(dāng)鼠標(biāo)移入的時(shí)候，輪播圖停止，即定時(shí)器被清除了，當(dāng)鼠標(biāo)移出的時(shí)候，定時(shí)器又重新被調(diào)用。