轮播图的根本其实就是缓动函数的封装，如果说轮播图是一辆跑动的汽车，那么缓动函数就是它的发动机，今天本文章就带大家由简入繁，封装属于自己的缓动函数~~
我们从需求的角度开始，首先给出一个简单需求：
1、我想让页面中的一个盒子从开始的位置匀速向右运动到200px的地方，该怎么实现？
分析：
1）我们需要知道盒子在哪个地方，这个可以通过offsetLeft属性去获取；
2）要让盒子匀速运动，对于js肯定需要setInterval了；
3）要让盒子向右边跑起来？那就是需要不停改变盒子与左边起始点的距离，有margin-left，还有定位的left，这里我选择了改变绝对定位的left；
4）跑到离开始点200px的距离我们要停下来，使用clearInterval就可以了。
接下来直接上代码了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } div { position: absolute; top: 50px; width: 100px; height: 100px; background-color: red; } input { width: 100px; height: 30px; color: #fff; background-color: yellowgreen; } </style> </head> <body> <div></div> <input type="button" value="移动到200" /> <script type="text/javascript"> // 获取到元素（这里有个小细节，如果给元素设置了id名，即便不使用获取元素的方法，也能通过这个id名获取到元素哦~~大家可以自己尝试一下） var btn = document.querySelector('input'), dv = document.querySelector('div'); // 添加点击事件 btn.addEventListener('click',function() { var timer = null,// 保存定时器 currentDistance = dv.offsetLeft, // 当前离父盒子的距离 step = 8,// 每次改变的距离 target = 200;// 目标距离 timer = setInterval(function() { currentDistance += step;// 当前距离 = 上一个当前距离 + 改变的距离 if((target - currentDistance) < step) { currentDistance = target; // 如果目标距离与当前距离的差小于了要改变的距离，这时候我们就直接让当前距离等于目标距离，防止盒子停下来的时候有误差 clearInterval(timer); // 清楚定时器 timer = null; // 将timer解绑，释放内存 } dv.style.left = currentDistance + 'px'; // 最核心的一步，改变盒子的left为当前距离 },17) }) </script> </body> </html>
2、一个初步运动的效果实现了，那么接下来我们改进了需求：
盒子运动到200px的位置后，我们要让盒子继续运动到400px的位置？
分析：
1）、这时候要有两个按钮点击，一个运动到200px，一个运动到400px
2）、虽然有两个运动，但是其使用的功能都是一样，都是从一个点移动到另一个点，所以我们考虑将1中的运动封装一个函数，以供复用。
上代码~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } div { position: absolute; top: 50px; width: 100px; height: 100px; background-color: red; } input { width: 100px; height: 30px; color: #fff; background-color: yellowgreen; } </style> </head> <body> <div></div> <input type="button" value="移动到200" /> <input type="button" value="移动到400" /> <script type="text/javascript"> // 封装函数，盒子和目标距离都是不确定的，我们可以将他们作为参数传递。 function animation(tag,target) { var timer = null, currentDistance = tag.offsetLeft, step = 5; step = currentDistance < target? step: -step;// 判断step的正负，200到400时是递增，400到200时是递减 timer = setInterval(function() { if(Math.abs(currentDistance - target) > Math.abs(step)) { // 这里判断条件也要略作改动，使用绝对值进行比较 currentDistance += step; / tag.style.left = currentDistance + 'px'; }else { tag.style.left = target + 'px' // 当当前距离与目标距离之间的差值小于step改变的距离时，我们直接让盒子移动到目标距离。 clearInterval(timer); timer = null; } },17) } var btns = document.querySelectorAll('input'), dv = document.querySelector('div'); btns[0].addEventListener('click',function() { animation(dv,200); }) btns[1].addEventListener('click',function() { animation(dv,400); }) </script> </body> </html>
3、盒子来回运动的函数我们封装好了，但是我们再想一下轮播图的滚动效果，它并不是匀速移动，而是最开始很块，在接近滚动完成时，速度又逐渐减低。
需求： 让盒子缓动（也就是变速运动）
上代码~