動畫部分包括：
1.鼠標經(jīng)過第幾個小圓點，就要展示第幾張圖片，并且小圓點的顏色也發(fā)生變化
2.圖片自動輪播，（這需要一個定時器）
3.鼠標經(jīng)過圖片，圖片停止自動播放（這需要清除定時器）
4.鼠標離開圖片乖寒，圖片繼續(xù)自動輪播 （重新開始定時器）
這里我們封裝了一個animate()動畫函數(shù)
```
// 動畫函數(shù) 第一個參數(shù)，代表誰動? 第二個參數(shù) 動多少
? ? ? ? // 讓圖片做勻速運動院溺，勻速動畫的原理是 當前的位置 + 速度? 即 offsetLeft + speed
? ? ? ? function animate(obj,target){
? ? ? ? ? ? // 首先清除掉定時器
? ? ? ? ? ? clearInterval(obj.timer);
? ? ? ? ? ? // 用來判斷 是+ 還是 -? 即說明向左走還是向右走
? ? ? ? ? ? var speed = obj.offsetLeft < target ? 15 : -15;
? ? ? ? ? ? obj.timer = setInterval(function(){
? ? ? ? ? ? ? ? var result = target - obj.offsetLeft;//它們的差值不會超過speed
? ? ? ? ? ? ? ? obj.style.left = obj.offsetLeft + speed + "px";
? ? ? ? ? ? ? ? // 有可能有小數(shù)的存在楣嘁，所以在這里要做個判斷? ? ? ? ? ? ?
? ? ? ? ? ? ? ? if (Math.abs(result) <= Math.abs(speed)) {
? ? ? ? ? ? ? ? ? ? clearInterval(obj.timer);
? ? ? ? ? ? ? ? ? ? obj.style.left = target + "px";
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },10);
? ? ? ? }
```
定時器 函數(shù)
```
var timer = null; // 輪播圖的定時器
? ? ? ? var key = 0;// 控制播放的張數(shù)
? ? ? ? var circle = 0;// 控制小圓點
? ? ? ? timer = setInterval(autoplay,1000);// 自動輪播
? ? ? ? function autoplay(){
? ? ? ? ? ? /*自動輪播時,要對播放的張數(shù)key進行一個判斷,如果播放的張數(shù)超過ulLis.length-1,
? ? ? ? ? ? 就要重頭開始播放.? 因為我們克隆了第一張并將其放在最后面,所以我們要從第二張圖片開始播放*/
? ? ? ? ? ? key++; // 先++
