一、輪播圖
1、輪播圖需求：
　　　　　　a、輪播圖需要實現左右翻頁的無縫連線
　　　　　　b、需要點選左右切換
　　　　　　c、需要實現跳轉
　　　　　　d、顯示當前位置的小圓點
2、輪播圖的原理：

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

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

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

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

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

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

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

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

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

二、jquery獲取元素各種寬高及頁面寬高總結

window.onload=function(){
　　var a = $("#div").width(),//width()返回元素的寬高，不包括padding/border/margin
　　b = $("#div").innerWidth(),//innerWidth()返回元素的寬高 + padding
　　c = $("#div").outerWidth(),//outerWidth()返回元素的寬高 + padding + border
　　d = $("#div").outerWidth(true);//outerWidth(true)返回元素寬高 + padding + border + margin
　　console.log(a,b,c,d);
}
獲取瀏覽器顯示區域（可視區域）的高度 ：
$(window).height();
獲取瀏覽器顯示區域（可視區域）的寬度 ：
$(window).width();
獲取頁面的文件高度
$(document).height();
獲取頁面的文件寬度 ：
$(document).width();
瀏覽器當前視窗文件body的高度：
$(document.body).height();
瀏覽器當前視窗文件body的寬度：
$(document.body).width();
獲取滾動條到頂部的垂直高度 (即網頁被捲上去的高度)
$(document).scrollTop();
獲取滾動條到左邊的垂直寬度 ：
$(document).scrollLeft();
獲取或設定元素的寬度：
$(obj).width();
獲取或設定元素的高度：
$(obj).height();
某個元素的上邊界到body最頂部的距離：obj.offset().top;（在元素的包含元素不含滾動條的情況下）
某個元素的左邊界到body最左邊的距離：obj.offset().left;（在元素的包含元素不含滾動條的情況下）
返回當前元素的上邊界到它的包含元素的上邊界的偏移量：obj.offset().top（在元素的包含元素含滾動條的情況下）
返回當前元素的左邊界到它的包含元素的左邊界的偏移量：obj.offset().left（在元素的包含元素含滾動條的情況下）

三、setInterval()方法
a、setInterval() 方法可按照指定的週期（以毫秒計）來呼叫函式或計算表示式。

b、setInterval() 方法會不停地呼叫函式，直到 clearInterval() 被呼叫或視窗被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的引數。