輪播圖的原理
1.圖片移動實現原理：
利用浮動將所有所有照片依次排成一行，給這一長串圖片新增一個父級的遮罩，每次只顯示一張圖，其餘的都隱藏起來。對圖片新增絕對定位，通過控制left屬性，實現照片的移動。

2.圖片移動動畫原理：
從a位置移動到b位置，需要先計算兩點之間的差值，通過差值和時間間隔，計算出每次移動的步長，通過新增定時器，每次移動相同的步長，實現動畫效果。

3.圖片定位停止原理：
每一張照片都有相同的寬度，每張照片都有一個絕對的定位數值，通過檢測定每次移動後，照片當前位置和需要到達位置之間的距離是否小於步長，如果小於，說明已經移動到位，可以將定時器清除，來停止動畫。

4圖片切換原理：
在全域性設定一個變數，記錄當前圖片的位置，每次切換或跳轉時，只需要將數值修改，並呼叫圖片頁數轉畫素位置函式，再呼叫畫素運動函式即可。

5.自動輪播原理：
設定定時器，一定時間間隔後，將照片標記加1，然後開始切換。

6.左右點選切換原理：
修改當前位置標記，開始切換。這裡需要注意與自動輪播之間的衝突。當點選事件觸發之後，停止自動輪播計時器，開始切換。當動畫結束後再次新增自動輪播計時器。

7.無縫銜接原理：
需要無縫銜接，難度在於最後一頁向後翻到第一頁，和第一頁向前翻到最後一頁。由於圖片的基本移動原理。要想實現無縫銜接，兩張圖片就必須緊貼在一起。所以在第一張的前面需要新增最後一張，最後一張的後面需要新增第一張。

7.預防鬼畜原理：
始終保證輪播圖的運動動畫只有一個，從底層杜絕鬼畜。需要在每次動畫開始之前，嘗試停止動畫定時器，然後開始為新的動畫新增定時器。

8.預防暴力點選原理：
如果使用者快速點選觸發事件，會在短時間內多次呼叫切換函式，雖然動畫函式可以保證，不會發生鬼畜，但在照片從最後一張到第一張的切換過程，不會按照正常的輪播，而是實現了跳轉。所以需要通過新增口令的方式來，限制使用者的點選。當用戶點選完成後，口令銷燬，動畫結束後恢復口令。

9.小圓點的位置顯示原理：
每次觸發動畫時，通過全域性變數標記，獲取當前頁數，操作清除所有小圓點，然後指定一頁新增樣式。

10.點選觸發跳轉的原理：
類似於左右點選觸發，只是這是將全域性頁面標記，直接修改，後執行動畫。需要避免與自動輪播定時器的衝突。

三、技術細節的實現
1.無縫切換
if(Math.abs(y - parseInt(show.style.left)) < Math.abs(step)){
show.style.left = y +"px";
if(num == 6) {
show.style.left = "-690px";
}
if(num == 0) {
show.style.left = "-3450px";
}
}
首先判斷圖片的位置，是否移動到位。當滿足當前位置，與預定位置之間的距離小於一步時，認定為移動到位，並把圖片直接定位到預定位置。然後判斷，圖片的位置是否需要跳轉。
ps：這裡一定要在圖片運動函式結束後，在進行跳轉。

2.預防鬼畜
try{clearInterval(timer);
}catch{}

step = (y-x)/100;
var timer = setInterval(function(){
show.style.left = parseInt(show.style.left) + step +"px";
if(Math.abs(y - parseInt(show.style.left)) < Math.abs(step)){
show.style.left = y +"px";
clearInterval(timer);
}
},1);