輪播圖感悟：
1、通過b站的介紹寫出了沒有計時器的輪播圖（有很多種方法）
2、具體的過程是這樣的：
1、首先通過一個表單ul 列出格式 給第一個設置 dataindex

image.png

image.png

 <script type="text/javascript">
       var items = document.getElementsByClassName('item');
       var points = document.getElementsByClassName('point');
       var goPreBtn = document.getElementById('goPre');
       var goNextBtn = document.getElementById('goNext');

       var index = 0;//表示第幾張圖片/第幾個點展示 （有active類名）
     var clearActive = function () {
        for (var i = 0; i < items.length ; i++) {
            items[i].className = 'item';
        }
        for (var i = 0; i < points.length ; i++) {
            points[i].className = 'point';
        }
   
       }
    var goIndex = function (){
        clearActive();
        //去掉原來的active
        console.log(index);
        points[index].className = 'point active'
        items[index].className = 'item active';
    }
       
    var goNext = function(){
        // 這個函數使得跳轉到最后一個后接著第一個繼續
        if (index < 4) {
            index ++;
        }else{
            index = 0;
        }
       
        goIndex();
    }
      
     

    var goPre = function(){
        
        if (index == 0) {
            index = 4;

        }else{
            index --;
        }
        goIndex();
    }

  goNextBtn.addEventListener('click',function(){
        goNext();

       })
  goPreBtn.addEventListener('click',function(){
        goPre();

  })

  for (var i = 0; i < points.length; i++) {
      points[i].addEventListener('click',function(){
        var pointIndex = this.getAttribute('data-index');
         index = pointIndex;
         goIndex();

      })
  }

第二種方法

大體思路： 先創建一個div，限定其寬度和高度，overflow：hidden。然后創建一個裝圖片的div，寬度為所有圖片的總寬度，并且使其浮動，這樣所有的圖片就處于一行中。然后為了實現無縫滾動，所以需要在首尾分別添加一張過渡圖片。 先添加兩個按鈕， 使其可以手動輪播，然后只需要添加一個定時器使其朝一個方向自動輪播即可

只有五張圖片，卻使用7張來輪播，這是為了實現無縫輪播.
而5個span，即我們可以實時看到輪播圖目前所處的位置。
最后是兩個按鈕，可以通過它來控制前進與后退。
這里需要對wrap使用絕對定位，所以用left:-600px;將第一張圖片顯示出來。

步驟二： css布局
首先，resetcss，如下所示：

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

接著，為了讓圖片只在container中，所以需要限定其寬度和高度并且使用overflow:hidden；將其余的圖片隱藏起來，并且希望wrap相對于container左右移動，所以設置為relative，如下：

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

設置wrap是絕對定位的，所以,就可以通過控制Left和Right來控制圖片的移動了。設置z-index:1;以對后面將要放置的buttons作為參考。 因為共有七張圖片，所以width為4200px（每張圖片設置為600X400）,只需讓圖片左浮動即可實現占滿一排了。
然后把圖片設置位左浮動，并限定其大小，如下所示：

wrap {
  position: absolute;
  width: 4200px;
  height: 400px;
  z-index: 1;
}
.container .wrap img {
    float: left;
    width: 600px;
    height: 400px;
  }

即這時已經顯示出了第一張圖片。并且充滿了整個container(container是有box-shadow的);
然后把顯示次序的buttons放在圖片的右下角。并且設置z-index:2;以保證buttons是在圖片的上面的。
在第一頁時，left值為-600，所以可以點擊一次上一張，但是當再點擊一次時，就出現了空白。同樣的，下一張點擊，到-3600是最后一張，就不能再繼續點擊了。　　
也就是說，當點擊下一張到-3600px（這是第一張圖片）時，需要下次跳轉到第二張，即-1200px；這樣才能正常跳轉；
同理，當點擊上一張到0px（這是第五張圖片時），希望下次跳轉到第四張，即-2400px

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

此時就 實現了圖片的自動播放，但是只能是手動播放，要想實現自動播放，使用setinterval即可

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

即先設定一個計時器，然后創建一個可以自動播放的函數，最后調用這個函數即可。 現在它就可以自動播放了
要仔細看其中一個圖片的時候，希望輪播圖停止播放，只要clearInterval()即可

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

現在，把鼠標移入輪播圖中，輪播圖就不會播放了。而移開鼠標之后，輪播圖自動播放。

設置小圓點動

設置buttons的index初始值為0，即第一個span的class為on，然后觸發next_pic函數時，index加1，當觸發prev_pic函數時，inex減1， 并設置當前index的小圓點的class為on， 這就要求index必須設置為全局變量，才能保證它在每一個函數的作用域中。
添加showCurrentDot函數：

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();

輪播圖就可以自動切換，并且小圓點也在隨著圖片的變化而變化了

當點擊小圓點時， 就可跳轉到相應圖片。

實現原理: 點擊小圓點，就使wrap的Left變成相應的值

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相同，在最開始的照片5和最終的照片1在使用時會出現問題，導致符號和位數的出錯，做相應地處理即可
         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);      
   }

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