輪播圖在我們的web項目中有着廣泛的運用，特別是在商城項目中，通常用於對新品、熱銷、促銷等產品的推薦，重要的站點公告也可以採用輪播圖的方式呈現。現在實現輪播圖有各種各樣的第三方插件可以用，哪怕是一個完全不懂javascript或者jQuery的新手，也能實現輪播的效果；但是，作為一個初學者，我們還是要稍微了解一下原理（大神請無視）。
實現輪播的手段其實有很多，比如移動圖片的位置、設置圖片的顯示隱藏等都可以實現輪播切換效果，這裡，我們簡單演示移動圖片距離的方式實現輪播效果。
首先編寫html頁面並配合簡單的css樣式，代碼如下：
效果如圖1所示：
我們實現輪播主要是要橫向移動圖片的位置，所以要將圖片浮動成一排，並且要隱藏多餘的部分，只顯示出一張圖片，補充css如下：
如圖2所示：
現在我們只能看到一張圖片，其餘的因為超出.slider-box的範圍而被隱藏，如下圖3所示：
其實移動圖片的原理很簡單，我們只需要不斷改變ul的left值就可以，如下圖4所示：
現在我們需要使用jQuery來不斷的改變這個left值。
首先，引入jquery-3.2.1.min.js；jq代碼如下：
刷新頁面，效果如圖5所示：
但是，圖片的切換是一瞬間完成的，而且只有一次，並沒有輪播，所以，這並不是我們想要的效果。輪播肯定是有規律的隨着時間變化而依次播放，所以，根據之前我們在《javascript動畫基礎》中講解的，我們必須結合時間函數以及時間增量完成動畫效果。
修改以上jq代碼：
效果如圖6所示：
現在雖然可以按照時間間隔切換圖片，但是在最後一張切換完成後，程序並沒有停止或者複位圖片，而是繼續在向後移動ul，所以出現了空白的情況，因為我們每次移動的距離為1920px剛好為圖片的寬度，實際上圖片只需要切換2次就可以到達第3張，再切換的話就會出現空白，我們需要先判斷left的是否已經為3張圖片的寬度總和，即left+5760是否等於0(left為負值)，如果等於0，那麼我們需要將ul的left值設置為0，再從頭開始切換，修改代碼：
效果如圖7所示：
現在圖片只要切換到最後一張，將不會繼續往後切換，而是回到第一張圖片，重頭切換。我們也可以使用jQuery提供的animate()方法，讓我們能看到圖片從右向左的切換過程：
效果如圖8所示：
那麼，一個簡單的輪播圖，我們就完成了。實現輪播的方式很多，這裡只是提供一個最基本的思路。喜歡的朋友可以點個關注，後期我們會放出進階視頻。
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/274575.html
微信掃一掃 
支付寶掃一掃 