素材牛VIP會員

基于jQuey實現的圖片輪播插件

 所屬分類:網頁特效-焦點圖/幻燈片

 瀏覽:542次-  下載:6次-  評論:25次-  發布時間:2019-05-28
基于jQuey實現的圖片輪播插件兼容IE11
積分說明:注冊即送15牛幣,每日簽到可獲得5牛幣,成為VIP會員可永久免積分下載!   充值積分   充值會員???更多說明?
素材描述:基于jquey實現的輪播插件(支持左右箭頭、圓點按鈕、觸摸切換、自動輪播)簡單易用
 標簽:輪播

詳細介紹

這是一款使用jquery實現的輪播插件,支持左右箭頭切換,觸摸切換,輪播點顯示,自動輪播,代碼注釋全面,代碼易修改,簡單的語法。

使用時只需要引入css及js相關文件,并在html寫一個容器,配置構造實例的參數啟用。

html:

css:


js:

/**
 * 參數:
 * 1.最外層父元素  必填項
 * 2.圖片地址數組  必填項
 * 3.配置信息      非必填
 * 4.輪播圖創建完畢回調,回調中返回輪播對象數組,可用于后續邏輯處理  非必填
 */
swiper.init($(".swiper-main"), [
    "./img/1.jpg",
    "./img/2.jpg",
    "./img/3.jpg",
    "./img/4.jpg"
], {
    arrowtype: 'move', //可選,默認一直顯示 - 'move' / 'none'(鼠標移上顯示 / 不顯示 )
    autoplay: true, //可選,默認true - true / false (開啟輪播/關閉輪播)
    cantouch: true, //可選,默認true - true / false (開啟拖拽切換/關閉拖切換)
    time: 3000 //可選,默認3000
}, function(list) {
    console.log("create success", list);
})

文件目錄結構

  • css
    • ┝ index.css
  • img
    • ┝ a1.png
    • ┝ a2.png
    • ┝ a3.png
    • ┝ arrow-left.png
    • ┝ arrow-right.png
  • ┝ index.html
  • js
    • ┝ index.js
    • ┝ jquery.min.js
    • ┝ swiper.js

討論這個素材(25)回答他人問題或分享使用心得會獎勵牛幣

18***05  
2019年05月29日

嗯嗯

回復
蒲***英  
2019年06月12日

這個挺好用的

回復
lg***35  
2019年06月21日

寫的真不錯!!!

回復
l8***88  
2019年06月22日

很漂亮,真不錯s

回復
礦***水  
2019年06月25日

不錯不錯!!不錯不錯!!不錯不錯!!

回復
lb***bj  
2019年06月26日

寫的真不錯!!!

回復
零***落  
2019年06月28日

這個特效不錯!!

回復
零***落  
2019年06月29日

特效不錯啊!!

回復
lb***bj  
2019年07月02日

很漂亮,真不錯s

回復
Ar***ff  
2019年07月05日

很不錯。

回復
Ar***ff  
2019年07月08日

可以

回復
Wh***at  
2019年07月09日

看起來真的不錯,學習一下

回復
零***落  
2019年07月10日

特效不錯!!

回復
Wh***at  
2019年07月11日

真的不錯

回復
零***落  
2019年07月11日

這個功能全面啊!!

回復
vi***ot  
2019年07月16日

特效不錯!!

回復
ka***88  
2019年07月16日

寫的真不錯!!

回復
si***ne  
2019年07月19日

寫的真好,厲害

回復
零***落  
2019年07月20日

寫的真好,厲害

回復
零***落  
2019年07月21日

很漂亮,真不錯啊!!!!

回復
零***落  
2019年07月23日

效果非常好的啊!!!!

回復
零***落  
2019年07月24日

效果非常好的啊~

回復
零***落  
2019年07月25日

效果非常好的啊!!

回復
lb***bj  
2019年07月25日

看起來真的不錯,學習一下

回復
零***落  
2019年07月26日

效果非常好的啊不錯!!

回復
勿***你  
2019年07月30日

寫的真不錯!

回復
古***場  
2019年08月01日

特效不錯!!

回復
 文明上網,理性發言!   ?? 阿里云幸運券,戳我領取
我的牛幣余額:0 已下載次數:6
所需牛幣:10 開始下載

牛幣獲取:可通過簽到、評論、充值、發布素材獲得 ? 牛幣充值

经典黑杰克注册