輪播圖動畫函數的寫法

在做輪播圖時，一般都要用到動畫，即將一張多個圖拼接起來的大圖，移動大圖的偏移位置，使得大圖在窗口父元素中可見區域輪番變化。寫輪播圖函數時，一般要注意一下幾點：

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);
   }