首頁 > 網際網路

用jquery如何寫輪播圖

2019-12-12 04:27:00

在做前端開發時,有時需要做一個輪播圖,使用jquery時,怎麼快速做一個輪播圖?下面我們來看一下。

1

我們先在html裡引入指令碼檔案,除了jquery檔案外,還需要一個輪播圖的外掛檔案,大家搜尋下載unslider外掛就行了。


2

html裡,先用ul,li標籤插入圖片


3

然後在圖片下方新增二個按鈕,用來控制左右控制圖片的。


4

然後新增一些樣式,主要控制輪播器的樣式的。


5

在js裡,我們先新增一個jquery的ready方法,就是頁面載入完成後呼叫的。


6

在ready方法裡,呼叫輪播控制元件的unslider方法來初始化輪播功能,程式碼如圖。


7

執行頁面後,我們就可以得到一個漂亮的輪播圖了。



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