不多說，直接來實現經典輪播圖導航欄效果。

實現效果圖：

實現代碼如下：

JavaScript

下面的這個是index.css文件，主要是樣式布局文件：

使用方法：

這里的css文件是放在css文件夾下面，里面會用到一個xframe.js文件，就相當于是一個JQuery文件，大家下載之后改為對應的名字就行，然后放在js 文件夾下面，后面就是一個index.html 文件了， 基本上將上面需要的依賴包放在同一個文件夾下面就可以運行了。

最后，小編整理了一份web前端學習資料，私信回復【01】，獲取源碼。

歡迎關注胖胖沖鴨的頭條號，可視化學習web前端，每天更新文章，讓web前端學習更加簡單。

聲明：本文內容來源于網絡，如有侵權請聯系刪除

• 吧，用swiper做輪播圖其實很簡單，特別是官網在使用說明上已經講得很清楚了。
• 但我還是在這里嘮叨幾下。
• 現有的js庫是很豐富的，其實我們常用到的組件都有了，輪播圖就是其中之一。
• 本文就講一下怎么用swiper做輪播圖，因為它是一個很出名的輪播圖組件。
• 更多文章請關注我的頭條號，我是落筆承冰。

一、百度一下“swiper”，進入它的中文官網。

• swiper歷經了多個版本，我們就用最新的swiper4來說說吧。

二、調用swiper的方法有很多種，比如用npm安裝之類的，這里我們就用下載css和js庫文件來實現吧。

• 解壓后，里面有很多文件，找哪個呢？就是這兩個，一個是css，一個是js。

三、我們創建一個空白test.html文件來添加swiper。

• 引用剛才我們下載的那兩個文件。

四、開始做html部分。

• 接下來放入輪播的模塊了。

五、大家知道html只是一個外表，js才是內核，于是我們加入js部分。

• 輪播是可以用了，但是真的很很不成看，只有一個很小的范圍可以輪播。

六、我們試著改一下輪播圖的大小，并加個顏色。

• 我們用谷歌瀏覽器F12進入控制臺，模擬手機界面看一下效果。

七、果然是滿寬高只有一半，可怎么劃動，只能劃到第三塊，怎么樣才能讓三回到一，循環劃動呢，加個loop:true就可以了。

• 然后我們再改改樣式，讓里面的字變大居中，變白色，再把body的邊距去掉。

八、再加個功能，讓它自動播，我不動手，讓它每秒跑到下一下張圖。

九、我們再加個分頁器，分頁器是什么東西，就是輪播下方的一個個小圓點，一點就是一頁，這里我們應該有三個點。

十、小圓點是有了，也會隨圖滾動了，可是它不能點擊啊，那好，我們加入這個就可以了點了。

• 還真的可以點擊了。

十一、人家的輪播圖有左右按鈕可以控制圖片上一張下一張，我們也可以加。

• 在js里聲明相應的對象

十二、即然只是入門，那么到這里就可以了，更多的使用方法，大家可以去官網查一下，最后，我把圖片放進去，做出真正的輪播圖吧。

• 我搞了三張圖，三張圖寬高大小不一，直接放進去了，多少會讓某些圖片少一截或是只看見一部分，這個問題大家自己修改圖片或添加樣式來處理了，我就不再說了。