jq輪播圖代碼左右切換（js輪播圖菜鳥教程）

輪播圖在我們的web項目中有著廣泛的運用，特別是在商城項目中，通常用于對新品、熱銷、促銷等產品的推薦，重要的站點公告也可以采用輪播圖的方式呈現?，F在實現輪播圖有各種各樣的第三方插件可以用，哪怕是一個完全不懂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所示：

那么，一個簡單的輪播圖，我們就完成了。實現輪播的方式很多，這里只是提供一個最基本的思路。喜歡的朋友可以點個關注，后期我們會放出進階視頻。