轮播图感悟：
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循环，则不能得到正确的结果。