圖片輪播我們經常在眾多網站中看到，各種輪播特效在有限的空間上展示了幾倍於空間大小的內容，並且有著良好的視覺效果。很多初學js的小夥伴都會拿這個來練習。我也不例外，所以在此分享幾個我寫輪播圖的過程，程式碼不足之處請多指教哦，相互學習。

好了，先來說第一種輪播特效：

就是通過修改每一張圖片的透明度，讓其每隔一段時間將其中的某一張圖片透明度設為1，而其它的設為0，從而實現一種圖片輪流播放的效果。

這種效果的思路比較簡單，首先讓一組圖片絕對定位，讓其重疊在一起，然後通過一個函式來控制圖片的透明度變化。同時還有一個定時器，不停的除發這個函式，每次改變不同圖片的透明度，讓其顯示。（更簡單的效果是直接修改display屬性，讓該顯示的圖片display:block,而不顯示的設為display:none就可以，只是效果上會差一些，但原理相同）

首先來看Html結構程式碼：

對其進行樣式調整之後，圖片都在同一個位置，可以先給第一張圖片設定為顯示，而其它的圖片設為不顯示。

下面來看js的程式碼：

這樣呼叫該外掛即可：autoplay.js是我將這個外掛儲存到本地的一個檔案。

 這裡面實現的時候結合了css3的transition屬性，讓程式碼更簡潔，動畫效果也更好。關於transition的相容我程式碼中並沒有加字首，需要的小夥伴們可以自行加上，這裡只演示一個實現過程。

第二種輪播特效：

這一種是滑動形式的，通過改變元素的left值讓圖片呈現左右滾動的效果。

html結構式這樣子的：

js外掛程式碼是這樣子的：

外掛的呼叫方式和上面第一種的一樣，因為原理都差不多，同樣結合了css3的動畫實現，所以就不贅述原理了。

還有一種是無縫輪播方式，就個人感覺這種的顯示效果最好。