js的轮播图

实现自动轮播、左右按钮切换上下一张图片、点击小圆点切换图片
效果图：

1.前期html和css布局

<div class="main">
      <div class="focu">
        <!-- 左侧按钮 -->
        <a href="javascript:;" class="arrow-l">
             <
        </a>
        <!-- 右侧按钮 -->
        <a href="javascript:;" class="arrow-r">></a>
        //大轮播
        <ul>
          <li>
            <a href="#"><img src="../img/壁纸1.jpg" alt="" /></a>
          </li>
          <li>
            <a href="#"><img src="../img/壁纸2.jpg" alt="" /></a>
          </li>
          <li>
            <a href="#"><img src="../img/壁纸3.jpg" alt="" /></a>
          </li>
          <li>
            <a href="#"><img src="../img/壁纸四.jpg" alt="" /></a>
          </li>
        </ul>
        <!-- 小圆圈 -->
        <ol class="circle"></ol>
      </div>
    </div>

2.获取按钮和大轮播

 var arrow_l = document.querySelector(".arrow-l");
 var arrow_r = document.querySelector(".arrow-r");
 var focu = document.querySelector(".focu");

3.给按钮设置鼠标经过显示和离开隐藏事件

focu.addEventListener("mouseenter", function () {
    arrow_l.style.display = "block";
    arrow_r.style.display = "block";
  });
  focu.addEventListener("mouseleave", function () {
    arrow_l.style.display = "none";
    arrow_r.style.display = "none";
  });

4.获取ul和小圆圈

var ul = focu.querySelector('ul');
var ol = focu.querySelector('ol');

5.让小圆圈的数目根据图片的数目来l创建和插入小圆点，并且加入点击事件，当点击小圆点时候按钮背景颜色样式改变

for(var i = 0; i < ul.children.length; i++){
    /*创建小li  */
    var li = document.createElement('li');
    li.setAttribute('index',i)    /* 把i记录下来 索引号方便设置动画 */
    /*将li插入ol  */
    ol.appendChild(li);
     /* 点击小圆圈切换颜色 */
  li.addEventListener('click',function(){
    /* 排他思想 */
    for(var i = 0;i < ol.children.length;i++){
      ol.children[i].className='';
    }
    this.className ='current'
  }
  ol.children[0].className = 'current'

5.点击小圆圈时候能够改变轮播的图片，animation动画后放在附件

 /* 点击那个小li就拿到那个li的索引 */
    var index = this.getAttribute('index')
    /* 为了让点击左右箭头还是小圆点时候 圆都能同步 */
    num = index;
    circle=num
    //获取轮播的图片宽度
    var focuwidth =focu.offsetWidth;
    /* 点击小圆圈移动图片  移动距离就是索引号乘以一个图片宽度 */
    animate(ul, -index * focuwidth);
  })

6.由于轮播图播放到最后一张图片时，这时再轮播，需要直接跳转到第一张图片。那就需要把第一张图片复制一份，放入大轮播之中

 // 克隆第一张图片放到ul里面去 
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first)

7.按钮点击进行下一张轮播图
先给按钮绑定事件

arrow_r.addEventListener('click',function ()

每一次点击按钮，num次数加一，执行动画函数，让图片跳转下一张，不要忘记小圆点的记录也要记上，不然会导致点击小圆点出现bug

 num++;
 animate(ul,-num*focuwidth)
 circle++;

当轮播到租后一张图片时候，这时候小圆点已经到达最后，需要手动清除当前小圆点的样式，重新给第一个小圆点赋值

// 如果circle等于li的长度 说明走到克隆图片了，已经到达尽头
    if(circle ==ol.children.length){
      circle = 0;
    }
    // 先清除小圆圈的class
    for(var i =0; i<ol.children.length;i++){
      ol.children[i].className= ''
    }
    // 再添加第一个小圆圈的class
    ol.children[circle].className = 'current'
   }

这时候同样的图片也走到了尽头，需要清除num，从新重第一张图片开始

   if(num == ul.children.length - 1){
      ul.style.left =0;
      num=0;
    }

8.轮播自动播放，就是等同于点击一次按钮，所以说在定时器里面加入点击事件即可。

var timer =setInterval(function(){
    arrow_r.click()
  },2000)

在鼠标经过轮播图时候，需要清除定时器

  clearInterval(timer)
  timer = null/* 清除定时器变量 */

9.如果一直点击按钮，轮播就会一直跳转，这样的效果不太好，所以在点击的时候设置节流阀

var flag =true
 arrow_r.addEventListener('click',function () {
   if(flag){
     flag =false;
    ......

在轮播动画结束之后，打开节流阀

 animate(ul,-num*focuwidth,function(){
      flag =true //等动画加载完毕之后打开节流阀
    })