首頁 > 網際網路

如何應用jquery的bxslider外掛

2019-12-11 14:09:47

我們進行網頁開發的時候經常需要製作輪播圖,如果自己從頭到尾實現會很麻煩。下面小編給大家分享如何用JQuery的bxslider外掛製作輪播圖。

1

開啟Sublime  Text軟體,新建一個HTML文件,如下圖所示


2

然後在HTML的head標籤內引入jquery.bxslider.css檔案和jquery.min.js,jquery.bxslider.min.js檔案,如下圖所示


3

然後在body區域建一個div,注意給div一個bxslider樣式,然後加上三個圖片,如下圖所示


4

接下來我們就可以在script標籤中呼叫bxSlider方法進行輪播圖的範例化了,如下圖所示


5

執行程式以後我們就會在頁面中看到如下圖所示的輪播圖了,各個元素都已經具備


6

最後,如果你想在初始化輪播圖的時候加一些設定項,可以如下圖所示的方式進行


7

綜上所述,運用Jquery的bxslider外掛的時候最主要的就是給div一個樣式了,樣式是bxslider中定義好的,所有的功能都已這個樣式為基礎。

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