[TOC] # 案例:网页轮播图 **轮播图也称为焦点图,是网页中比较常见的网页特效。** 一个大盒子，轮播图用ul装，ul的盒子可以大于父盒子，   ## 功能需求: 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。 2.点击右侧按钮一 次,图片往左播放一张,以此类推，左侧按钮同理。 3.图片播放的同时,下面小圆圈模块跟随-起变化。 4.点击小圆圈，可以播放相应图片。 5.鼠标不经过轮播图,轮播图也会自动播放图片。 6.鼠标经过 ,轮播图模块，自动播放停止。 ## 1.案例分析 （隐藏左右按钮） ①因为js较多，我们单独新建js文件夹,再新建js文件，引入页面中。 ②此时需要添加load事件。（页面加载完，在处理事件） ③鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。 ④显示隐藏display按钮。 ### js引入代码 ~~~ window.addEventListener('load', function() { alert(1); }) ~~~ ### 1.代码  ## ①动态生成小圆圈 ②核心思路:小圆圈的个数要跟图片张数一致 ③所以首先先得到ul里面图片的张数(图片放入li里面,所以就是li的个数) ④利用循环动态生成小圆圈(这个小圆圈要放入ol里面) ⑤创建节点createElement('li') ⑥插入节点ol.appendChild(li) ⑦第一个小圆圈需要添加current类  ## 排他思想 （小按钮颜色变化） ①小圆圈的排他思想 ②点击当前小圆圈，就添加current类 ③其余的小圆圈就移除这个current类 ④注意:我们在刚才生成小圆圈的同时，就可以直接绑定这个点击事件了。  ## ①点击小圆圈滚动图片 ②此时用到animate动画函数，将js文件引入(注意，因为index.js 依赖animate.js所以，animate.js 要写到index.js上面) ③使用动画函数的前提，该元素必须有定位 ④注意是ul移动而不是小li **⑤**滚动图片的核心算法:点击某个小圆圈，就让图片滚动小圆圈的索引号乘以图片的宽度做为ul移动距离 ⑥此时需要知道小圆圈的索引号，我们可以在生成小圆圈的时候，给它设置一个自定义属性，点击的时候获取这个自定 义属性即可。     ## 点击右按钮，图片变化 （html 代码把第一个图片复制，放在最后） ①点击右侧按钮一次，就让图片滚动一张。 ②声明一个变量num，点击一次，自增1，让这个变量乘以图片宽度，就是ul 的滚动距离。 ③图片无缝滚动原理 ④把ul第一个i复制-份，放到ul的最后面 ⑤当图片滚动到克隆的最后一张图片时，让ul快速的、 不做动画的跳到最左侧: left 为0 ⑥同时num赋值为0，可以从新开始滚动图片了 css样式  js  ## 优化 点击右按钮，图片变化 （在生成小圆圈之后） **①点击右侧按钮，小圆圈跟随变化** ②最简单的做法是再声明一个变量circle,每次点击自增1,注意，左侧按钮也需要这个变量，因此要声明全局变量。 ③但是图片有5张，我们小圆圈只有4个少一个，必须加一-个判断条件 ④如果circle == 4就从新复原为0    ## 优化小圆圈 和按钮 能同步  # 左侧按钮   优化 下面   # ①自动播放功能 ②添加一个定时器. ③自动播放轮播图，实际就类似于点击了右侧按钮  ⑤鼠标经过focus就停止定时器 ⑥鼠标离开focus就开启定时器  ⑤鼠标经过focus就停止定时器 ⑥鼠标离开focus就开启定时器