携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第21天，点击查看活动详情
-
封装动画函数
- 单一动画；多属性动画
要点：
-
在定义函数（）里面的变量时，不需要加var，可以直接使用；
-
创建对象的方法：var obj = {};
-
遍历对象时，定义的k的值是对象中的标题，而且为字符串类型
-
注意.getComputedStyle(ele)[k]的写法
-
高级无缝滚动轮播案例：
-
思路：
1.利用offsetWidth来动态获取折返点
2.利用innerHTML自动生成另一组li结构
3.鼠标移上，播放停止
4.鼠标离开，播放继续
-
-
完整切换效果轮播图案例：
-
思路：
-
获取元素：须获取ul或者ol下的li标签，通过ul.children获取
-
定义全局信号量就，存储的是要展示的图片所在的li的下标
- 右按钮点击事件，切换到下一章（同样的代码不要书写多次，直接调用函数：
- 一次onclick事件，信号量自加；需要判断是否超过最大下标 - 使用排他思想，将所有li标签的className设为空；然后单独设置下标所在的li为current属性 - 在使用排他思想时，还需要对应控制小圆点的current-
左按钮点击事件，切换到下一章：
-
执行一次onclick事件，信号量自减；需要判断是否小于最小下标
-
使用排他思想，将所有li标签的className设为空；然后单独设置下标所在的li为current属性
-
在使用排他思想时，还需要对应控制小圆点的current
-
-
下标小圆点事件，点哪个小圆点，对应展示图片：
-
使用循环给每个小圆点添加点击事件，然后获取对应下标（须提前定义.index来存储下标），通过this关键字调用.index 来赋值给信号量
-
调用切换函数
-
-
轮播图自动播放，执行类似于右按钮事件（可以将右按钮定义成一个函数，直接调用）：
-
定义一个定时器
-
调用右按钮函数
-
-
鼠标移上轮播图，停止自动轮播：使用clearInterval清除定时器
-
鼠标离开轮播图，重新开始自动轮播，直接给timer定时器赋值右按钮函数
-
-
返回顶部特效
-
知识点：获取页面滚动的距离：document.documentElement.scrollTop
-
在页面往下卷动到一定距离后，让header高度变低，让返回顶部按钮出现
-
添加页面滚动事件：window.onscroll = function () {};
-
获取页面滚动的距离: document.documentElement.scrollTop
-
做判断：如果滚动距离大于10，顶部菜单栏宽度减少，返回顶部按钮出现；反之类似
-
-
-
点击返回顶部，让页面以动画的方式跳转到页面顶部
-
添加一个点击事件，并且设置变量获取当前页面滚动的距离，定义常量存储初始位置和步长
-
添加定时器
-
