Web前端之轮播图的写法

全文思维导图如下：

轮播图

一.实现效果

1.最终视觉图：

2.效果功能:

• 鼠标不进入时隐藏左右箭头且自动播放
• 可通过圆圈点击切图，或箭头切图
• 可循环，且连续点击会等一张播放完才切图

二.实现原理

1.主要构成部分

• 多张图片【放在ul下的小 li 里面】
• 左右箭头【使用arrow-r，arrow-l 类，里面放小图标】
• 索引圆圈【放在ol下的小li里面，且动态生成】

2.涉及知识点(随附代码)

图片循环播放原理

克隆第一张图片【深克隆，使用cloneNode(ture)方法】，从而最后一张播放完后下一张又会是第一张，同时，当走到了最后一张时，将ul的位置跳到最左；同理，走到第一张时，跳到最右，从而悄无声息地实现 "伪循环"。

缓动动画

• 实现原理

可传参数三个分别是 obj, target, callback ，第一个表示动画作用对象，第二个表示要移动的目标位置，第三个表示移动后的回调函数。

首先是计算移动步长，此处是以目标位置减去当前对象距左边的距离，然后除以10，随着当前对象距左边距离越来越接近目标位置，步长会越来越短，从而实现 缓动效果。

然后每次移动都让当前对象的左距变为 当前左距+步长 即可实现 移动。

• 注意事项

（1）求步长(step)时，注意根据其正负来决定取整时是取大(ceil)还是取小(floor)

（2）在移动过程中，注意对象左距的改变（通过obj.style.left）最后要加单位 'px'

（3）此处封装的动画函数是针对左右移动的，如果要上下移动，只需更改为上距即可

• 具体代码

// 封装缓动动画效果函数
function animate(obj, target, callback) {
  clearInterval(obj.timer);
  //设置计时器
  obj.timer = setInterval(function () {
    // 步长值写到定时器的里面
    var step = (target - obj.offsetLeft) / 10;
    // 对步长进行取整，以防止出现小数问题，
    // 并考虑到后退时会产生正负，取整时要考虑是取大还是取小
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    //ceil [天花板] 、floor [地板]
    if (obj.offsetLeft == target) {
      clearInterval(obj.timer);
      //回调函数写到计时器结束里面
      // if (callback) {
      //     //如果有函数实参传进来，就调用函数
      //     callback();
      // }
      // 上面两行有更高级的写法，即使用或与运算符，如下:
      callback && callback();
    } else {
      obj.style.left = obj.offsetLeft + step + 'px';
    }
  }, 30)
}

计时器

代码见上animate函数，此处使用的setInterval(function, time)，传入参数分别是执行函数和执行间隔时间，该计时器将会每间隔time时间执行一次function函数；

在animate.js中每次都先clearInterval,是为了保证动画被反复执行时（如多次点击箭头）都会先删除上一次生成的计时器，防止计时器的叠加；

且为保证每一个对象有自己独有的计时器，所以自定义了timer属性，将obj.timer = setInterval(){} ,就可以保证多个对象不会共用一个计时器。

圆圈效果

结构：在圆角矩形（ol）中放置圆圈（小 li )

特点：小圆圈是动态添加的，使用js判断图片张数创建节点，然后添加到矩形中

注意：因为考虑到后续图片的移动，所以要在创建节点时就给li添加一个自定义的属性用于索引(自定义属性名用data-开头)

（使用这行代码增加属性用来索引 var index = this.getAttribute('data-index');）

以下是圆角矩形(类名为.circle)的CSS代码实现：

.main .circle {
            display: inline-block;
            position: absolute;
            /*下面三行用来定位和居中*/
            left: 50%;
            bottom: 10px;
            transform: translateX(-50%);
            /*下面三行分别用来调色、形状和上下居中*/
            background-color: rgba(100, 100, 100, 0.5);
            border-radius: 7px;
            font-size: 0;
        }

以下是内部小圆圈的CSS代码实现【.current类是当前显示图片】

.circle li {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  margin: 2px;
}

ol .current{
  background-color: skyblue;
        }

显示图标

此处使用的是阿里图标，点击右边可跳转 iconfont-阿里巴巴矢量图标库，使用方法之一

步骤如下：

①下载并引入font文件夹（解压后内容如下）

②引入到html中，

③直接使用类名引入图标，注意要引入两个！一个是iconfont,一个是icon-icon-xxx【到iconfont.css里面找】

节流阀（补充）

使用一个flag标志即可，放在回调函数中，变换数值

三.具体代码

1.html页面

2.轮播图js

window.onload = function () {
  // 1。获取元素
  var arrow_l = document.querySelector('.arrow-l');
  var arrow_r = document.querySelector('.arrow-r');
  var focus = document.querySelector('.main');
  //因为ul可能有很多，所以应该查找focus下的ul
  var ul = focus.querySelector('ul');
  var ol = focus.querySelector('ol');
  
  var num = 0;//用于作为图片索引的
  // var circle = 0;//用于作为圆圈索引的，此处我用num兼容了该作用
  
  // 2.鼠标经过就显示左右箭头并停止自动播放
  focus.addEventListener('mouseenter', function () {
    arrow_l.style.display = 'block';
    arrow_r.style.display = 'block';
    clearInterval(timer);
    timer = null;
  })
  //鼠标离开就开启自动播放
  focus.addEventListener('mouseleave', function () {
    arrow_l.style.display = 'none';
    arrow_r.style.display = 'none';
    timer = setInterval(function (){
      arrow_r.click();
    },3000);
  })
  
  // 3.根据ul下的小li的个数来生成小圆圈
  for (var i = 0; i < ul.children.length; i++) {
    var li = document.createElement('li');
    // 为每个小li添加属性，设置索引号
    li.setAttribute('data-index', i);
    // 4.在生成小li时就给它绑定单击事件
    li.addEventListener('click', function () {
      var index = this.getAttribute('data-index');
      
      num = index;//此处将index的值赋给num,实现箭头点击和小圆圈的同步
      
      var target = -focus.offsetWidth * index;
      // console.log(index);
      // console.log(target);
      // 5.利用排他思想，突出被选中的小圆圈
      for (var j = 0; j < ol.children.length; j++) {
        //取消其他圆圈之前点击时加上的类名
        ol.children[j].className = '';
      }
      this.className = 'current';
      animate(ul, target);
    })
    //把li插入到ol中
    ol.appendChild(li);
  }
  ol.children[0].className = 'current';
  // 6.克隆第一张图片(li)放到ul最后面(放在循环外就不会生成多余的小圆圈)
  var first = ul.children[0].cloneNode(true);//true表示深克隆(不仅克隆节点，还克隆内容)
  ul.appendChild(first);//将克隆的图片加到ul中
  // 7.点击右侧按钮，图片滚动一张
  
  //设置一个变量作为节流阀，用于控制点击箭头不要滚动过快
  var flag = true;
  
  arrow_r.addEventListener('click', function () {
    if (flag){
      flag = false; //关闭节流阀
      // 如果走到了最后一张图片，则将ul快速回到第一张
      if (num == ul.children.length - 1) {
        console.log(num);
        ul.style.left = 0;
        num = 0;
      }
      // 此处不能使用else,否则num的值对不上
      num++;
      animate(ul, -focus.offsetWidth * num,function (){
        flag = true; //动画执行完就打开节流阀
      });
      circlechange(num);
    }
  })
  
  //8.点击左侧按钮，同上理
  arrow_l.addEventListener('click', function () {
    if (flag){
      flag = false;
      // 如果走到了第一张图片，则将ul快速回到最后一张
      if (num == 0) {
        num = ul.children.length - 1;
        //注意！一定要在最后加'px'
        ul.style.left = - num * focus.offsetWidth + 'px';
      }
      // 此处不能使用else,否则num的值对不上
      num--;
      animate(ul, -focus.offsetWidth * num,function (){
        flag = true;
      });
      circlechange(num);
    }
  })
  
  //这段改变圆圈的代码是可以复用的
  function circlechange(num){
    // 清除其他小圆圈
    for (var i = 0; i < ol.children.length; i++) {
      ol.children[i].className = '';
    }
    // 将自己此时的小圆圈变色
    if (num == ol.children.length) {
      // 此时num = 4，表示第五张图片
      ol.children[0].className = 'current';
    } else {
      ol.children[num].className = 'current';
    }
  }
  
  //9.自动播放功能(当鼠标移动在上面就停止自动播放)
  var timer = setInterval(function (){
    //arrow_r.click()可以实现自动点击
    arrow_r.click();
  },3000);
  
}

3.缓动动画js

// 封装缓动动画效果函数
function animate(obj, target, callback) {
    clearInterval(obj.timer);
    //设置计时器
    obj.timer = setInterval(function () {
        // 步长值写到定时器的里面
        var step = (target - obj.offsetLeft) / 10;
        // 对步长进行取整，以防止出现小数问题，
        // 并考虑到后退时会产生正负，取整时要考虑是取大还是取小
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        //ceil [天花板] 、floor [地板]
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
            //回调函数写到计时器结束里面
            // if (callback) {
            //     //如果有函数实参传进来，就调用函数
            //     callback();
            // }
            // 上面两行有更高级的写法，即使用或与运算符，如下:
            callback && callback();
        } else {
            obj.style.left = obj.offsetLeft + step + 'px';
        }
    }, 30)
}