效果案例实现pc端轮播图
- 布局：ul下有很多li标签；浮动在一行；
- 原理：切换图片的时候，把ul位置修改一下，给ul的父容器，设置一个 overflow:hidden；
- 功能需求：
- 序号轮播
- 左右按钮的轮播
- 自动轮播
- 鼠标在轮播图里面的时候，停止自动轮播，离开后继续自动轮播
- 其实就是tab栏；
- 获取元素：所有的小圆点序号
- 注册事件：鼠标移入mouseover小圆点的事件
- 移入之后：
- 小圆点：排他**实现当前样式出现；
- 图片切换：计算ul应该向左移动多少，
ul的位置 = 图片宽度 * 索引 * -1;
-
获取元素：左右按钮
-
注册事件：click
-
点击之后：整体向左滑动一格；
- 变量控制下标增1；
- 我要一直向右滑动动么？
- 不能滑动到无限，
- 点击下标为5，显示为第6张；
- 点击下标为6，显示为第1张；回归下标为0；
-
实现：点击右侧
- 设置变量，为初始化图片的下标为0；
- 点击右侧，变量加+；
- 下标0：显示第一张；
- 下标为5：显示第六张；
- 下标为6，当前显示第1张，回到下标为0;
-
实现：点击左侧
-
设置变量，为初始化图片的下标为0；（0：已经显示为第一张图片）
-
点击左侧，变量加-；
-
当 变量==0 时，让它归到ul.children.length - 1；
- 5下标：显示第六张；
- 0下标：显示第一张；
- 所以：点击的一瞬间：变量==-1，应该显示第六站图片，归于ul.children.length - 1；
- 点击左右按钮切换图片后，小圆点也应该跟着切换当前样式；
- 让当前下标的小圆点的样式变化：排他**；
- 完成上面左右切换联动序号样式；
- 当鼠标通过序号切换后，在用左右切换，会出现问题，原因：
- 左右按钮控制一个全局变量，也把全局变量的值联动给小圆点的样式了；（左右切换联动序号）
- 小圆点自己切换的时候，没有影响到全局变量，所以会出现乱转的情况；
- 如何设置：把小圆点切换时控制的当前的下标，赋值给全局的变量（左右按钮控制的那个变量）即可；
- 初始化页面，页面自动向右轮播；
- 实现：
- 需要把向右的函数提炼为一个函数
- 定时器：执行向右点击的函数
- 鼠标不在整个盒子上操作时，图片自动向右轮播；
- 现实：
- 获取元素：整个盒子；
- 注册事件：鼠标移出；
- 移出之后：定时器执行向右的函数；（需要把向右的函数提炼为一个函数）
- 鼠标在盒子上，停止自动轮播
- 实现：
- 获取元素：整个盒子；
- 注册事件：鼠标移入；
- 移入之后：清除定时器；