jQuery輪播圖插件gmlBanner

所屬分類:媒體-幻燈片和輪播圖

分享到微信朋友圈
X
jQuery輪播圖插件gmlBanner ie兼容11

jQuery輪播圖插件gmlBanner

更新時間:2020-01-18 21:09:19

- $(".banner") 這是調用插件的對象為輪播圖的父級框

- banner() 輪播圖插件函數,接收兩個參數

+ 第一個參數要切換圖片的集合,必填

- 第二個參數是輪播圖的輪播方式屬性,選填,有默認規則

    + but:true,    // 左右按鈕默認為true

    + butahidden:true,    // 是否自動隱藏左右按鈕默認隱藏

    + list:true,  // 導航按鈕

    + index:3,    //初始從第幾個開始默認為0

    + autoPlay:true,  // 自動輪播默認為true

    + delayTiem:2000,  // 延遲時間默認為2000

    + moveTime:500    // 遠動時間默認為300

css

.box{height:300px;width:1000px;margin: 0 auto;position: relative;}
.imgbox img{height:300px;width:1000px}

html

<div class="banner box">
    <div class="imgbox">
        <img src="images/1.jpg" alt="">
        <img src="images/2.jpg" alt="">
        <img src="images/3.jpg" alt="">
        <img src="images/4.jpg" alt="">
        <img src="images/5.jpg" alt="">
    </div>
</div>
<div class="banner1 box">
    <div class="imgbox">
        <img src="images/1.jpg" alt="">
        <img src="images/2.jpg" alt="">
        <img src="images/3.jpg" alt="">
        <img src="images/4.jpg" alt="">
        <img src="images/5.jpg" alt="">
    </div>
</div>

js

$(".banner").banner($(".banner").find("img"),{
    but:false,    // 左右按鈕默認為true
    butahidden:true,    // 是否自動隱藏左右按鈕默認隱藏
    list:false,  // 導航按鈕
    index:3,    //初始從第幾個開始默認為0
    autoPlay:true,  // 自動輪播默認為true
    delayTiem:2000,  // 延遲時間默認為2000
    moveTime:500    // 遠動時間默認為300
});
$(".banner1").banner($(".banner1").find("img"));
相關插件-幻燈片和輪播圖

基于anime.js全屏圖片視差旋轉切換

基于anime.js制作全屏響應式的圖片輪播展示效果
  幻燈片和輪播圖
 15322  251

jQuery游戲人物輪播切換效果

jQuery游戲人物輪播切換效果,基于slick幻燈片插件制作的一款背景圖片切換效果。
  幻燈片和輪播圖
 21524  246

jQuery門戶網站帶縮略圖相冊

jQuery帶縮略圖相冊效,一個不錯的相冊效果,推薦大家使用哦!
  幻燈片和輪播圖
 32421  277

jQuery焦點圖插件slideshow-jq.js

jQuery自動化圖片比例焦點圖slider效果
  幻燈片和輪播圖
 16472  148

討論這個項目(0)回答他人問題或分享插件使用方法獎勵jQ幣 評論用戶自律公約

取消回復
cba联赛上午开发