轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~
我们从需求的角度开始,首先给出一个简单需求:
1、我想让页面中的一个盒子从开始的位置匀速向右运动到200px的地方,该怎么实现?
分析:
1)我们需要知道盒子在哪个地方,这个可以通过offsetLeft属性去获取;
2)要让盒子匀速运动,对于js肯定需要setInterval了;
3)要让盒子向右边跑起来?那就是需要不停改变盒子与左边起始点的距离,有margin-left,还有定位的left,这里我选择了改变绝对定位的left;
4)跑到离开始点200px的距离我们要停下来,使用clearInterval就可以了。
接下来直接上代码了
<div class="jb51code">
<pre class="brush:xhtml;">
<!DOCTYPE html>
<html lang="en">