轮播图动画函数的写法

在做轮播图时，一般都要用到动画，即将一张多个图拼接起来的大图，移动大图的偏移位置，使得大图在窗口父元素中可见区域轮番变化。写轮播图函数时，一般要注意一下几点：

1. 关于移动步进大小的设置；
   移动步进大小决定着动画的快慢，通常采用距离大时移动步进大，距离小时移动步进小的方法；这就意味着步进必须与距离相关，通常取距离的某个比例，比如1/10；这样做步进必定会成为浮点数，当判断是否到达目的地时很不方便；所以步进还需要再取整。JS里取整有两个方法，Math.ceil()和Math.floor()，分别对应着大于浮点数的取整和小于浮点数的取整。再考虑到如果步进小于1时，采用Math.floor()会造成步进等于0，无法进行动画，所以选择Math.ceil()方法来取整；

2. 获取元素位置信息的方法
   通常有两种方式来获取元素位置，element.style.left和element.offsetLeft两个属性，element.style.left获取的值是字符串类型，需要再用parsInt()函数取其中的数字，而element.offsetLeft则直接获取数值型，用此属性更方便；

3. 连续快速移动鼠标导致动画队列堆积
   连续快速移动鼠标，会导致图片元素多次调用动画函数，且传入的参数不相同，图片元素动画混乱。而我们要的效果是最后鼠标指向的位置，所以鼠标快速移动所经历的中间位置引起的动画信息要清零；也就是调用的中间这部分动画队列要清除。这种跟元素本身有关的信息，适合用元素的属性变量来解决；
   动画的产生是重复调用的结果，而重复调用的实现方式是采用setTimeout函数，函数本身要返回一个唯一标识定时器的信息。我们要清零动画队列，也就是要clearTimeout这些setTimeout定时器。
   给元素自定义一个属性，指向定时器的返回标识信息；在函数开始时，判断图片元素的这个属性是否有值，如果没有值，则表明没有其他动画队列，只有目前执行的动画，所以继续进行；如果有值，则表明已经在执行动画了，把当前执行的动画清零，执行下一个准备进行的动画；
   下面是一个动画函数的基本写法，传入的参数中，num代表着目的地信息，element代表图片元素；
   function imageScroll(num, element) {
   // var element = document.getElementById(elementID);
   if(element.timer) {
   clearTimeout(element.timer);
   }
   var pos = element.offsetLeft;//获取图像元素当前位置；数值类型；
   var posNew = -550 * num;

   var dis = posNew - pos;
   var time = 10;
   var step = Math.ceil(Math.abs(dis / time));
   if(pos < posNew) {
   pos = pos + step;
   }
   if(pos > posNew) {
   pos = pos - step;
   }

   element.style.left = pos + ‘px’;
   if(pos == posNew) {
   return true;
   }
   element.timer = setTimeout(function() {
   imageScroll(num, element);
   }, 5);
   }