簡單輪播的實現

　　以前在培訓班裏面學到的實現輪播的方式有不少，不管是從 HTML、CSS、JavaScript、仍是 jQuery 方面，代碼、佈局都有多種方法，只要掌握其中原理和邏輯，剩下的就是看我的喜愛。

　　固然咱們在編程的過程當中，要注意代碼規範、頁面工整、避免代碼冗餘、圖片加載、浪費內存、遵循命名規範等。

　　不管寫一個什麼樣的網頁，第一步即是素材的準備，第二步整理好基本樣式/佈局，而後用 HTML + CSS 實現靜態樣式，用 jQuery 實現動態效果，最後即是調試程序。（我的一直是這樣的流程）。

　　首先從文件目錄上面：（文件夾要清晰明瞭，我的不喜歡所有放在一個目錄下面，因此會採用目錄分開的方式）

　　

　　而後即是 HTML + CSS 佈局：（記住寫註釋是一個很好的習慣，方便本身/別人查看）

　　

　　通常在寫網站的時候都會有一個公共的樣式文件，本頁不代碼並很少，因此我把公共樣式（pubic）和 頁面樣式 style 放在一塊兒。

　　布好局以後頁面會是這樣：

　　

　　如今尚未任何動態效果，只是一個靜態的樣式顯示。

　　我所用的動態方法是使用 setInterval 時間間隔，最簡單的原理就是獲取 li 的寬度，用 jQuery 控制 CSS 實現動態效果。（其實這個方法仍是很簡單）

　　

　　

　　能夠看到JS代碼只有70多行。裏面包括輪播自動循環，手動點擊張數，裏面的計程（num_ber）和計數（index_ber）是主要變量參數。