案例：网页轮播图

案例：网页轮播图

也称为焦点图

功能需求：

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

其中模块：

• 动态生成小圆圈：

1. 核心思路：小圆圈的个数要和图片张数一致
2. 首先得到ul里面图片的数量，（图片放入li里面，所以是li的个数）
3. 利用循环动态生成小圆圈（这个小圆圈要放入ol里面）
4. 创建节点 createElement (’ li ')
5. 插入节点 ol.appendChild ( li )
6. 第一个小圆圈添加类名li.children[0].className = "current";

• 点击小圆圈，可以播放相应图片

排他思想： 点击当前小圆圈，就添加current 类，其余的就移除这个类

• 点击小圆圈滚动图片

1. 此时用到 animate 动画函数，将js文件引入，因为index.js 依赖 animate.js 所以 animate.js 必须写到 index.js 上面
2. 使用动画函数的前提，该元素必须有定位
3. 是ul 移动 ，不是 li
4. 滚动图片核心算法：点击某个小圆圈，就让图片滚动小圆圈的索引号乘以图片的宽度(是负值)作为 ul 的移动距离
5. 此时需要知道小圆圈的索引号，我们可以在生成小圆圈的时候给他设置一个自定义属性，点击的时候获取这个自定义属性即可

• 点击右侧按钮一次，图片往左播放一次

1. 声明一个变量 num 点击一次 自增一 ，让这个变量乘以图片宽度，就是ul的滚动距离
2. 图片滚动到最后一张时，用到图片无缝滚动
3. 图片无缝滚动原理：把ul 的第一个 li 复制一份，放到 ul 的最后面
4. 当图片滚动到最后一张时，让ul快速的，不做动画地跳到最左侧:left 为 0
5. 同时把 num 赋值为 0 ，重新开始滚动

• 克隆第一张图片

1. 克隆ul 第一个 li cloneNode() 加 true 深克隆 复制里面的子节点 false 浅克隆
2. 添加到ul 最后面appendChild

-图片播放的同时，下面小圆圈模块跟随一起变化

1. 最简单的做法是再声明一个变量circle ，每次点击自增一，注意：左侧按钮也需要这个变量，因此声明全局变量
2. 因为前面把第一张图片克隆了，因此小圆圈比图片少一个，要加一个判断条件：if circle = 图片数量-1 说明走到了克隆的图片了 此时让circle = 0 复原回去

• 自动播放

1. 添加一个定时器
2. 自动播放轮播图，实际就类似于点击了右按钮
3. 此时我们使用手动调用右侧按钮点击事件 arrow_r.click()
4. 鼠标经过focus 就停止定时器

• 节流阀

用于防止轮播图连续点击造成播放过快

节流阀目的：当上一个函数动画执行完毕，再去执行下一个函数动画，让事件无法连续触发

核心思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数

1. 开始设置一个变量 var flag = true;
2. if (flag){flag=flase;do something;} 关闭水龙头
3. 利用回调函数，动画执行完毕，flag = true 打开水龙头
   （os:但是我下面的代码不知道为什么实现不了节流阀功能，就没加进去，如果有大佬看到了知道怎么改请指教一下）
   如果加上节流阀，布局应该是下面的样式：

 var flag = true; //节流阀
  arrow_r.addEventListener("click", function () {
   
    if (flag) {
   
      flag = false;
      //如果走到了最后复制的一张 ul 要快速复原 left 改为0
     .........
      animate(ul, -num * focusWidth, function () {
   
        flag = true; //打开节流阀
      });
    .........
    }
  });
 arrow_l.addEventListener("click", function () {
   
    if (flag) {
   
      flag = false;
      //如果走到了最后复制的一张 ul 要快速复原 left 改为0
     ...........
      animate(ul, -(num * focusWidth), function () {
   
        flag = true;
      });
    ...........
    }
  });

代码：
HTML 代码：

   <!-- 引入首页的css文件 -->
   <link rel="stylesheet" href="css/index.css" />
   <!-- 引入JS文件 -->
   <script src="js/animate.js"><