网页轮播图.png
轮播图也称为焦点图，是网页中比较常见的网页效果。

功能需求

1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。
3.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理
4.图片播放的同时，下面小圆圈模块跟随一起变化。
5.点击小圆圈，可以播放相应图片
6.鼠标不经过轮播图，轮播图也会自动播放图片。
7.鼠标经过轮播图模块，自动播放停止。

案例分析

1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。
2.动态生成小圆圈
Ⅰ.核心思路：小圆圈的个数要跟图片张数一致
Ⅱ.首先先得到ul里面图片的张数（ul中li的个数）
Ⅲ.利用循环动态生成小圆圈（生成的小圆圈）
Ⅳ.创建节点createElement(‘li’)、插入节点ol.appendChild(li)
Ⅴ.给第一个小圆圈添加current类名
3.小圆圈的排他思想
Ⅰ.点击当前小圆圈，就添加current类名
Ⅱ.其余的小圆圈就移除这个current类名
Ⅲ.注意：刚才生成小圆圈的同时，就可以直接绑定这个点击事件了
4.点击小圆圈滚动图片
Ⅰ.用到animate动画函数，将js文件引入（index.js依赖于animate.js）
Ⅱ.使用动画函数的前提：该元素必须有定位
Ⅲ.注意是ul动，不是li
Ⅳ.滚动图片的核心算法：点击某个小圆圈，就让图片(ul)滚动小圆圈索引号*图片宽度
Ⅴ.小圆圈索引号通过设置自定义属性来获取
5.点击右侧按钮，就让图片滚动一张
Ⅰ.声明一个变量num，点击一次，自增1，让这个变量✖图片宽度，就是ul滚动距离
Ⅱ.图片无缝滚动原理：
①把ul第一个li复制一份，放到ul的最后面
②当图片滚动到克隆的最后一张图片时，让ul快速的、不做动画的跳到最左侧 left:0
③同时num赋值为0，可以重新开始滚动图片了
6.衔接5，克隆第一张图片（代码更加智能化）
Ⅰ.克隆ul第一个li cloneNode() 加true深克隆(复制里面的节点)，false浅克隆
Ⅱ.添加到ul最后 appendChild
7.点击右侧按钮，小圆圈跟随变化
Ⅰ.最简单的做法是再声明一个变量circle，每次点击自增1。注意：左侧按钮也需要这个变量，因此要声明全局变量。
8.左侧按钮，与右侧按钮同理
9.自动播放轮播图
Ⅰ.添加一个定时器
Ⅱ.自动播放轮播图，实际上类似于按时点击了右侧按钮
Ⅲ.此时我们使用手动调用右侧按钮点击事件 arrow_r.click()
Ⅳ.鼠标经过focus就停止定时器，鼠标离开focus就启动定时器
源代码：
链接：https://share.weiyun.com/ysvbVmih 密码：j9ydhm

  1. //简单动画函数封装  obj目标对象  target目标位置
  2.         //给不同的元素指定了不同的定时器
  3.         //缓动动画
  4.         function animate (obj,target,callback) {
  5.             clearInterval(obj.timer);
  6.             //让盒子在当前位置+1距离
  7.             //定时器重复操作，最后清除定时器
  8.             obj.timer = setInterval(function(){
  9.                 //步长值写到定时器的里面
  10.                 var step = (target - obj.offsetLeft) / 10;
  11.                 step = step > 0 ? Math.ceil(step) : Math.floor(step);
  12.                 //获得盒子当前的位置
  13.                 var x = obj.offsetLeft;
  14.                 if(x == target){
  15.                     clearInterval(obj.timer);
  16.                     //回调函数写在定时器结束的位置
  17.                     if(callback){
  18.                         //调用函数
  19.                         callback();
  20.                     }
  21.                 }
  22.                 obj.style.left = x + step + 'px';
  23.             },15);
  24.         }
  1. // 轮播图效果
  2. window.addEventListener('load',function(){
  3.     //获取元素
  4.     var arrow_l = document.querySelector('.arrow-l');
  5.     var arrow_r = document.querySelector('.arrow-r');
  6.     var focus = document.querySelector('.focus');
  7.     var ul = focus.querySelector('ul');
  8.     var ol = focus.querySelector('ol');
  9.     var focusWidth = focus.offsetWidth;//图片宽度
  10.     //1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。
  11.     focus.addEventListener('mouseenter',function(){
  12.         arrow_l.style.display = 'block';
  13.         arrow_r.style.display = 'block';
  14.         //鼠标经过focus就停止定时器
  15.         clearInterval(timer);
  16.         timer = null;
  17.     });
  18.     focus.addEventListener('mouseleave',function(){
  19.         arrow_l.style.display = 'none';
  20.         arrow_r.style.display = 'none';
  21.         //鼠标离开focus就启动定时器
  22.         timer = setInterval(function(){
  23.             //手动调用点击事件
  24.             arrow_r.click();
  25.         },2000);
  26.     });
  27.     //2.动态生成小圆圈
  28.     for(var i =0; i < ul.children.length; i++){
  29.         //创建li
  30.         var li = document.createElement('li');
  31.         //给li添加自定义索引号
  32.         li.setAttribute('data-index',i);
  33.         //向ol添加li节点
  34.         ol.appendChild(li);
  35.         //3.小圆圈的排他思想，在循环里绑定点击事件
  36.         li.addEventListener('click',function(){
  37.             //干掉所有人
  38.             for(var j = 0; j < ol.children.length; j++){
  39.                 ol.children[j].className = '';
  40.             }
  41.             //留下我自己
  42.             this.className = 'current';
  43.             //4.点击小圆圈移动图片(ul)
  44.             //ul每次移动距离 = 小圆圈索引号 * 图片宽度  向左移动为负值
  45.             var indexNum = this.getAttribute('data-index');
  46.             //解决小bug
  47.             //当我们点击了某个小li就要把索引值给num变量，不然图片会乱
  48.             num = indexNum;
  49.             //同理，当我们点击了某个小li就要把索引值给circle变量，不然小圆圈会乱
  50.             cricle = indexNum;
  51.             var distance = indexNum * focusWidth;
  52.             animate(ul,-distance);
  53.         });
  54.     }
  55.     //给第一个小圆圈添加current类名
  56.     ol.children[0].className = 'current';
  57.     //6衔接5.克隆第一张图片给ul
  58.     var firstImg = ul.children[0].cloneNode(true);
  59.     ul.appendChild(firstImg);
  60.     //5.点击右侧按钮，图片滚动一张
  61.     var num = 0;//声明一个变量num，点击一次，自增1
  62.     var cricle = 0;//声明一个变量circle，每次点击自增1
  63.     arrow_r.addEventListener('click',function(){
  64.         //如果走到最后复制的一张，此时我们的ul要快速的复原left:0
  65.         if(num == ul.children.length - 1){
  66.             ul.style.left = 0;
  67.             num = 0;
  68.         }
  69.         num++;
  70.         animate(ul,-num * focusWidth);
  71.         // 7.点击右侧按钮，小圆圈跟随变化
  72.         cricle++;//要放在if前面，因为有五张图但是只有四个小圆圈！
  73.         if(cricle == ol.children.length){
  74.             cricle = 0;
  75.         }
  76.         cricleChange();
  77.     });
  78.     //8.左侧按钮
  79.     arrow_l.addEventListener('click',function(){
  80.         //如果从第一张跳到最后一张，此时我们的ul要快速的改为left:-num * focusWidth + 'px'
  81.         if(num == 0){
  82.             num = ul.children.length - 1;
  83.             ul.style.left = -num * focusWidth + 'px';
  84.         }
  85.         num--;
  86.         animate(ul,-num * focusWidth);
  87.         // 点击左侧按钮，小圆圈跟随变化
  88.         cricle--;//要放在if前面，因为有五张图但是只有四个小圆圈！
  89.         if(cricle < 0){
  90.             cricle = ol.children.length - 1;
  91.         }
  92.         cricleChange();
  93.     });
  94.     //代码优化：封装小圆圈的排他思想
  95.     function cricleChange(){
  96.         //先清除其他小圆圈的current类名
  97.         for(var i = 0; i < ol.children.length; i++){
  98.             ol.children[i].className = '';
  99.         }
  100.         //留下自己的current类名
  101.         ol.children[cricle].className = 'current';
  102.     }
  103.     //9.自动播放轮播图
  104.     var timer = setInterval(function(){
  105.         //手动调用点击事件
  106.         arrow_r.click();
  107.     },2000);
  108. });

.