新聞中心
這篇文章將為大家詳細(xì)講解有關(guān)如何使用jquery做圖片輪播,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
用jquery做圖片輪播的方法:首先引入jquery的腳本文件;然后引入lightslider的腳本文件,在js腳本里通過傳入ul標(biāo)簽的id,調(diào)用lightSlider方法;最后運(yùn)行頁面。
該方法適用于所有品牌電腦
用jquery做圖片輪播的方法:
1、Jquery有很多功能強(qiáng)大的插件,圖片輪播的插件當(dāng)然也是有的,百度搜索‘lightslider’,然后下載插件代碼回來。
2、然后實(shí)現(xiàn)圖片輪播。當(dāng)然我們需要先引入jquery的腳本文件。
3、然后引入lightslider的腳本文件,對應(yīng)的樣式文件也是需要的。
4、html部分就很簡單了,一個(gè)ul,li的標(biāo)簽就行了,要注意的是li標(biāo)簽里有一個(gè)data-thumb
的屬性,屬性值就是圖片的路徑。
5、在js腳本里,通過傳入ul標(biāo)簽的id,調(diào)用lightSlider方法,來初始化一個(gè)實(shí)例。里面的參數(shù)可以參考文檔。
6、運(yùn)行頁面,我們就可以看到一個(gè)漂亮的圖片輪播插件了。
7、除了會(huì)自動(dòng)播放后,我們點(diǎn)擊下方的一張圖片,大圖里也會(huì)相應(yīng)顯示這張圖片的。
關(guān)于如何使用jquery做圖片輪播就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
網(wǎng)頁標(biāo)題:如何使用jquery做圖片輪播-創(chuàng)新互聯(lián)
本文鏈接:http://fisionsoft.com.cn/article/egdsj.html