原生js實(shí)現(xiàn)輪播圖的示例代碼

很多網(wǎng)站上都有輪播圖，但卻很難找到一個(gè)系統(tǒng)講解的，因此這里做一個(gè)簡(jiǎn)單的介紹，希望大家都能有所收獲，如果有哪些不正確的地方，希望大家可以指出。

成都創(chuàng)新互聯(lián)公司主要從事成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)公安,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專(zhuān)業(yè),歡迎來(lái)電咨詢建站服務(wù):18980820575

原理：

將一些圖片在一行中平鋪，然后計(jì)算偏移量再利用定時(shí)器實(shí)現(xiàn)定時(shí)輪播。

步驟一：建立html基本布局

如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>輪播圖</title>
</head>
<body>
  <div class="container">
    <div class="wrap" >
      <img src="./img/5.jpg" >
      <img src="./img/1.jpg" >
      <img src="./img/2.jpg" >
      <img src="./img/3.jpg" >
      <img src="./img/4.jpg" >
      <img src="./img/5.jpg" >
      <img src="./img/1.jpg" >
    </div>
    <div class="buttons">
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
    </div>
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow_left">&lt;</a>
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow_right">&gt;</a>
  </div>
</body>
</html>

 只有五張圖片，卻使用7張來(lái)輪播，這是為了實(shí)現(xiàn)無(wú)縫輪播，后面會(huì)詳細(xì)介紹。

而5個(gè)span，即我們可以實(shí)時(shí)看到輪播圖目前所處的位置。

最后是兩個(gè)按鈕，可以通過(guò)它來(lái)控制前進(jìn)與后退。

這里我們需要對(duì)wrap使用絕對(duì)定位，所以用left:-600px;將第一張圖片顯示出來(lái)。

步驟二： css布局

首先，resetcss，如下所示：

* {
      margin:0;
      padding:0;
    }
    a{
      text-decoration: none;
    }

接著，我們?yōu)榱俗寛D片只在container中，所以需要限定其寬度和高度并且使用overflow:hidden；將其余的圖片隱藏起來(lái)，并且我們希望wrap相對(duì)于container左右移動(dòng)，所以設(shè)置為relative，如下：

   .container {
      position: relative;
      width: 600px;
      height: 400px;
      margin:100px auto 0 auto;
      box-shadow: 0 0 5px green;
      overflow: hidden;
    }

我們?cè)O(shè)置wrap是絕對(duì)定位的，所以,我們就可以通過(guò)控制Left和Right來(lái)控制圖片的移動(dòng)了。設(shè)置z-index:1;以對(duì)后面將要放置的buttons作為參考。 因?yàn)楣灿衅邚垐D片，所以width為4200px（每張圖片我們?cè)O(shè)置為600X400）,我們只需讓圖片左浮動(dòng)即可實(shí)現(xiàn)占滿一排了。

    .wrap {
      position: absolute;
      width: 4200px;
      height: 400px;
      z-index: 1;
    }

然后我們把圖片設(shè)置位左浮動(dòng)，并限定其大小，如下所示：

  .container .wrap img {
      float: left;
      width: 600px;
      height: 400px;
    }

現(xiàn)在的效果如下：

原生js實(shí)現(xiàn)輪播圖的示例代碼    

即這時(shí)已經(jīng)顯示出了第一張圖片。并且充滿了整個(gè)container(container是有box-shadow的);

然后我們把顯示次序的buttons放在圖片的右下角。并且設(shè)置z-index:2;以保證buttons是在圖片的上面的。 

    .container .buttons {
      position: absolute;
      right: 150px;
      bottom:20px;
      width: 100px;
      height: 10px;
      z-index: 2;
    }

然后將buttons下面的span做一個(gè)簡(jiǎn)單的修飾，并且給和圖片對(duì)應(yīng)的span設(shè)置一個(gè)on類(lèi)，如下： 

    .container .buttons span {
      margin-left: 5px;
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: green;
      text-align: center;
      color:white;
      cursor: pointer;
    }
    .container .buttons span.on{
      background-color: red;
    }

接下來(lái)，我們把左右切換的箭頭加上，然后做簡(jiǎn)單的修飾，注意：因?yàn)檫@里使用實(shí)體來(lái)表示左右箭頭，所以設(shè)置font-size才能改變其大小，

    .container .arrow {
      position: absolute;
      top: 35%;
      color: green;
      padding:0px 14px;
      border-radius: 50%;
      font-size: 50px;
      z-index: 2;
      display: none;
    }
    .container .arrow_left {
      left: 10px;
    }
    .container .arrow_right {
      right: 10px;
    }
    .container:hover .arrow {
      display: block;
    }
    .container .arrow:hover {
      background-color: rgba(0,0,0,0.2);
    }

步驟三：添加js邏輯

我們首先獲取到 wrap（因?yàn)橐O(shè)置其left才能控制輪播圖），然后獲取到左右兩個(gè)箭頭，并實(shí)現(xiàn)手動(dòng)輪播，如下： 

 var wrap = document.querySelector(".wrap");
    var next = document.querySelector(".arrow_right");
    var prev = document.querySelector(".arrow_left");
    next.onclick = function () {
      next_pic();
    }
    prev.onclick = function () {
      prev_pic();
    }
    function next_pic () {
      var newLeft = parseInt(wrap.style.left)-600;
      wrap.style.left = newLeft + "px";
    }
    function prev_pic () {
      var newLeft = parseInt(wrap.style.left)+600;
      wrap.style.left = newLeft + "px";
    }

值得注意的是，這里wrap.style.left是一個(gè)字符串，所以要轉(zhuǎn)化為數(shù)字才能進(jìn)行計(jì)算，而設(shè)定left時(shí)就要加上px成為一個(gè)字符串了。

現(xiàn)在我們來(lái)測(cè)試一下：

原生js實(shí)現(xiàn)輪播圖的示例代碼 

可以看到，在第一頁(yè)時(shí)，left值為-600，所以我們可以點(diǎn)擊一次上一張，但是當(dāng)再點(diǎn)擊一次時(shí)，就出現(xiàn)了空白。同樣的，下一張點(diǎn)擊，到-3600是最后一張，就不能再繼續(xù)點(diǎn)擊了。

也就是說(shuō)，當(dāng)我們點(diǎn)擊下一張到-3600px（這是第一張圖片）時(shí)，我們需要下次跳轉(zhuǎn)到第二張，即-1200px；這樣才能正常跳轉(zhuǎn)；

同理，當(dāng)我們點(diǎn)擊上一張到0px（這是第五張圖片時(shí)），我們希望下次跳轉(zhuǎn)到第四張，即-2400px；

按照這樣的思路我們重新將next_pic和prev_pic函數(shù)修改如下： 

    function next_pic () {
      var newLeft;
      if(wrap.style.left === "-3600px"){
        newLeft = -1200;
      }else{
        newLeft = parseInt(wrap.style.left)-600;
      }
      wrap.style.left = newLeft + "px";
    }
    function prev_pic () {
      var newLeft;
      if(wrap.style.left === "0px"){
        newLeft = -2400;
      }else{
        newLeft = parseInt(wrap.style.left)+600;
      }
      wrap.style.left = newLeft + "px";
    }

這時(shí)，我們就可以發(fā)現(xiàn)圖片可以循環(huán)播放了！

但是，這時(shí)我們僅僅時(shí)手動(dòng)循環(huán)播放的，我們?nèi)绻Ｍ詣?dòng)播放，使用setInterval()即可，如下所示： 

    var timer = null;
    function autoPlay () {
      timer = setInterval(function () {
        next_pic();
      },1000);
    }
    autoPlay();

即先設(shè)定一個(gè)計(jì)時(shí)器，然后創(chuàng)建一個(gè)可以自動(dòng)播放的函數(shù)，最后調(diào)用這個(gè)函數(shù)即可。 現(xiàn)在它就可以自動(dòng)播放了，效果如下：

原生js實(shí)現(xiàn)輪播圖的示例代碼

但是如果我們想要仔細(xì)看其中一個(gè)圖片的時(shí)候，我們希望輪播圖停止播放，只要clearInterval()即可，如下：

    var container = document.querySelector(".container");
    container.onmouseenter = function () {
      clearInterval(timer);
    }
    container.onmouseleave = function () {
      autoPlay();  
    }

現(xiàn)在，只要我們把鼠標(biāo)移入輪播圖中，這時(shí)輪播圖就不會(huì)播放了。而移開(kāi)鼠標(biāo)之后，輪播圖自動(dòng)播放。

但是到目前為止，輪播圖下方的小圓點(diǎn)還沒(méi)有動(dòng)，現(xiàn)在我們就實(shí)現(xiàn)它。

原理很簡(jiǎn)單，即設(shè)置buttons的index初始值為0，即第一個(gè)span的class為on，然后觸發(fā)next_pic函數(shù)時(shí)，index加1，當(dāng)觸發(fā)prev_pic函數(shù)時(shí)，inex減1， 并設(shè)置當(dāng)前index的小圓點(diǎn)的class為on， 這就要求index必須設(shè)置為全局變量，才能保證它在每一個(gè)函數(shù)的作用域中。

添加showCurrentDot函數(shù)：

    var index = 0;
    var dots = document.getElementsByTagName("span");
    function showCurrentDot () {
      for(var i = 0, len = dots.length; i < len; i++){
        dots[i].className = "";
      }
      dots[index].className = "on";
    }

在next_pic中添加代碼：

      index++;
      if(index > 4){
        index = 0;
      }

在prev_pic中添加大嗎：

      index--;
      if(index < 0){
        index = 4;
      }
      showCurrentDot();

這樣，輪播圖就可以自動(dòng)切換，并且小圓點(diǎn)也在隨著圖片的變化而變化了。

但是，這距離我們經(jīng)?？吹降妮啿D還有一定距離 - - - 當(dāng)點(diǎn)擊小圓點(diǎn)時(shí)， 就可跳轉(zhuǎn)到相應(yīng)圖片。 實(shí)現(xiàn)原理即：  點(diǎn)擊小圓點(diǎn)，就使wrap的Left變成相應(yīng)的值。代碼如下：

 

 for (var i = 0, len = dots.length; i < len; i++){
      (function(i){
        dots[i].onclick = function () {
          var dis = index - i;
          if(index == 4 && parseInt(wrap.style.left)!==-3000){
            dis = dis - 5;   
          }
          //和使用prev和next相同，在最開(kāi)始的照片5和最終的照片1在使用時(shí)會(huì)出現(xiàn)問(wèn)題，導(dǎo)致符號(hào)和位數(shù)的出錯(cuò)，做相應(yīng)地處理即可
          if(index == 0 && parseInt(wrap.style.left)!== -600){
            dis = 5 + dis;
          }
          wrap.style.left = (parseInt(wrap.style.left) + dis * 600)+"px";
          index = i;
          showCurrentDot();
        }
      })(i);      
    }

原理就是當(dāng)點(diǎn)擊到小圓點(diǎn)時(shí)，得到相應(yīng)的i值，這個(gè)i值也就是span的index值，我們拿他和全局變量index作比較，然后重新設(shè)置wrap.style.left的值，然后把i值復(fù)制給全局變量index，最后顯示當(dāng)前的小原點(diǎn)即可。值得注意的是：這里涉及到了閉包的概念，如果直接使用for循環(huán)，則不能得到正確的結(jié)果。

最終效果如圖：

原生js實(shí)現(xiàn)輪播圖的示例代碼 　

最終代碼如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>輪播圖</title>
  <style>
    * {
      margin:0;
      padding:0;
    }
    a{
      text-decoration: none;
    }
    .container {
      position: relative;
      width: 600px;
      height: 400px;
      margin:100px auto 0 auto;
      box-shadow: 0 0 5px green;
      overflow: hidden;
    }
    .container .wrap {
      position: absolute;
      width: 4200px;
      height: 400px;
      z-index: 1;
    }
    .container .wrap img {
      float: left;
      width: 600px;
      height: 400px;
    }
    .container .buttons {
      position: absolute;
      right: 5px;
      bottom:40px;
      width: 150px;
      height: 10px;
      z-index: 2;
    }
    .container .buttons span {
      margin-left: 5px;
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: green;
      text-align: center;
      color:white;
      cursor: pointer;
    }
    .container .buttons span.on{
      background-color: red;
    }
    .container .arrow {
      position: absolute;
      top: 35%;
      color: green;
      padding:0px 14px;
      border-radius: 50%;
      font-size: 50px;
      z-index: 2;
      display: none;
    }
    .container .arrow_left {
      left: 10px;
    }
    .container .arrow_right {
      right: 10px;
    }
    .container:hover .arrow {
      display: block;
    }
    .container .arrow:hover {
      background-color: rgba(0,0,0,0.2);
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="wrap" >
      <img src="./img/5.jpg" >
      <img src="./img/1.jpg" >
      <img src="./img/2.jpg" >
      <img src="./img/3.jpg" >
      <img src="./img/4.jpg" >
      <img src="./img/5.jpg" >
      <img src="./img/1.jpg" >
    </div>
    <div class="buttons">
      <span class="on">1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
    </div>
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow arrow_left">&lt;</a>
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow arrow_right">&gt;</a>
  </div>
  <script>
    var wrap = document.querySelector(".wrap");
    var next = document.querySelector(".arrow_right");
    var prev = document.querySelector(".arrow_left");
    next.onclick = function () {
      next_pic();
    }
    prev.onclick = function () {
      prev_pic();
    }
    function next_pic () {
      index++;
      if(index > 4){
        index = 0;
      }
      showCurrentDot();
      var newLeft;
      if(wrap.style.left === "-3600px"){
        newLeft = -1200;
      }else{
        newLeft = parseInt(wrap.style.left)-600;
      }
      wrap.style.left = newLeft + "px";
    }
    function prev_pic () {
      index--;
      if(index < 0){
        index = 4;
      }
      showCurrentDot();
      var newLeft;
      if(wrap.style.left === "0px"){
        newLeft = -2400;
      }else{
        newLeft = parseInt(wrap.style.left)+600;
      }
      wrap.style.left = newLeft + "px";
    }
    var timer = null;
    function autoPlay () {
      timer = setInterval(function () {
        next_pic();
      },2000);
    }
    autoPlay();

    var container = document.querySelector(".container");
    container.onmouseenter = function () {
      clearInterval(timer);
    }
    container.onmouseleave = function () {
      autoPlay();  
    }

    var index = 0;
    var dots = document.getElementsByTagName("span");
    function showCurrentDot () {
      for(var i = 0, len = dots.length; i < len; i++){
        dots[i].className = "";
      }
      dots[index].className = "on";
    }

    for (var i = 0, len = dots.length; i < len; i++){
      (function(i){
        dots[i].onclick = function () {
          var dis = index - i;
          if(index == 4 && parseInt(wrap.style.left)!==-3000){
            dis = dis - 5;   
          }
          //和使用prev和next相同，在最開(kāi)始的照片5和最終的照片1在使用時(shí)會(huì)出現(xiàn)問(wèn)題，導(dǎo)致符號(hào)和位數(shù)的出錯(cuò)，做相應(yīng)地處理即可
          if(index == 0 && parseInt(wrap.style.left)!== -600){
            dis = 5 + dis;
          }
          wrap.style.left = (parseInt(wrap.style.left) + dis * 600)+"px";
          index = i;
          showCurrentDot();
        }
      })(i);      
    }
  </script>
</body>
</html>

 總結(jié)：

實(shí)現(xiàn)一個(gè)輪播圖還是不難的，大體思路： 先創(chuàng)建一個(gè)div，限定其寬度和高度，overflow：hidden。然后創(chuàng)建一個(gè)裝圖片的div，寬度為所有圖片的總寬度，并且使其浮動(dòng)，這樣所有的圖片就處于一行中。然后為了實(shí)現(xiàn)無(wú)縫滾動(dòng)，所以需要在首尾分別添加一張過(guò)渡圖片。 先添加兩個(gè)按鈕， 使其可以手動(dòng)輪播，然后只需要添加一個(gè)定時(shí)器使其朝一個(gè)方向自動(dòng)輪播即可，因?yàn)橛脩粲袝r(shí)需要查看詳情，所以當(dāng)鼠標(biāo)進(jìn)入時(shí)就clear定時(shí)器，滑出再定時(shí)播放。為了更好地用戶體驗(yàn)，我們?cè)傧旅嫣砑恿艘慌判A點(diǎn)，用戶可以清楚地知道現(xiàn)在所處的位置， 最后， 利用閉包使得用戶可以直接通過(guò)點(diǎn)擊小圓點(diǎn)切換圖片。

網(wǎng)站名稱：原生js實(shí)現(xiàn)輪播圖的示例代碼
網(wǎng)站網(wǎng)址：http://bm7419.com/article4/jdchoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、靜態(tài)網(wǎng)站、微信公眾號(hào)、網(wǎng)站改版、網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

小程序開(kāi)發(fā)