关于动画函数封装以及轮播图（重点）原理的实现

动画实现原理

核心原理：用定时器 setInterval（）不断移动盒子位置

实现步骤

1. 获得盒子当前位置
2. 让盒子在当前位置加上1个移动距离
3. 利用定时器不断重复这个操作
4. 加一个结束定时器的条件
5. 此元素需要添加定位 ， 才能使用 element . style . left

动画函数简单封装

注意函数需要传递2个参数 ， 动画对象和移动到的距离

动画函数给不同元素记录不同定时器

如果多个元素都使用这个动画函数 ，每次都要var声明定时器 ， 我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）

核心原理：利用JS是一门动态语言 ， 可以很方便的给当前对象添加属性

缓动效果原理

缓动动画就是让元素运动速度有所变化 ， 最常见的就是让速度慢慢停下来

思路：

1. 让盒子每次移动的距离慢慢变小 ， 速度就会慢慢落下来
2. 算法：（目标值 - 现在的位置）/ 10做为每次移动的距离步长
3. 停止的条件：让当前盒子位置等于目标位置就停止定时器

动画函数添加回调函数

回调函数原理：函数可以作为一个参数 ， 将这个函数作为参数传到另一个参数里面 ， 当那个函数执行完之后 ， 再执行传进去的这个函数 ， 这个过程就叫做回调

回调函数书写位置：定时器结束的位置

轮播图

也称为焦点图 ， 是网页中常见的网页特效

功能需求

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