素材牛

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

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

 瀏覽:264次-  下載:5次-  評論:9次-  發布時間:2019-05-28
基于jQuey實現的圖片輪播插件兼容IE11
積分說明:注冊即送5牛幣,每天簽到可獲得5牛幣,第三方賬號登陸、注冊直接贈送20牛幣!??? 我要充值???更多積分說明?
素材描述:基于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

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

18247251005
2019年05月29日

嗯嗯

回復
蒲公英
2019年06月12日

這個挺好用的

回復
lg7280535
2019年06月21日

寫的真不錯!!!

回復
l8888
2019年06月22日

很漂亮,真不錯s

回復
礦物質水
2019年06月25日

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

回復
l8888
2019年06月26日

aaaaaaaaadd

回復
lbj
2019年06月26日

寫的真不錯!!!

回復
零之小落
2019年06月28日

這個特效不錯!!

回復
零之小落
2019年06月29日

特效不錯啊!!

回復
lbj
2019年07月02日

很漂亮,真不錯s

回復
Arvinff
2019年07月05日

很不錯。

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

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

會員賬號
會員密碼
安全驗證
旧板彩客网