首頁 > 網際網路

怎麼使用jquery做圖片輪播

2019-12-12 01:41:35

在做網頁開發時,我們經常會使用到圖片輪播的功能,下面我們就來看一下使用jquery如何做一個圖片輪播。

1

Jquery有很多功能強大的外掛,圖片輪播的外掛當然也是有的,百度搜尋‘lightslider’,然後下載外掛程式碼回來。


2

然後實現圖片輪播。當然我們需要先引入jquery的指令碼檔案。


3

然後引入lightslider的指令碼檔案,對應的樣式檔案也是需要的。


4

html部分就很簡單了,一個ul,li的標籤就行了,要注意的是li標籤裡有一個data-thumb的屬性,屬性值就是圖片的路徑。


5

在js指令碼裡,通過傳入ul標籤的id,呼叫lightSlider方法,來初始化一個範例。裡面的引數可以參考文件。


6

執行頁面,我們就可以看到一個漂亮的圖片輪播外掛了。


7

除了會自動播放後,我們點選下方的一張圖片,大圖裡也會相應顯示這張圖片的。



IT145.com E-mail:sddin#qq.com