適用的banner圖輪播插件----格林王子舉哥

第一步：下載demo（包含css和JS）

鏈接：https://pan.baidu.com/s/1OY6398N7ZxPrJCQHpCQ4sw 
提取碼：obcm

第二步：在body裏面準備一個容器

<div class="modularity" style="position: relative;padding-right:318px;">
        <!--中間  上面部分 banner圖-->
        <div class="submenu-box" style="height:198px;width:99%;">
            <div class="swiper-main" style="height:198px;width:100%;">
                <!--img圖片-->
                <div class="swiper-content"></div>
                <!--圖片下面的小點-->
                <div class="swiper-point"></div>
                <div class="swiper-arrow arrow-left"><img 
                      src="../../system/banner/img/arrow-left.png" alt=""></div>
                <div class="swiper-arrow arrow-right"><img src="../../system/banner/img/arrow-right.png" alt=""></div>
                <div class="arrow-more"><span>更多</span></div>
            </div>
		</div>
    </div>

第三步：JS部分

 

$(function(){
            swiper.init(
                $(".swiper-main"),
                [
                    "../../system/banner/img/ban1.png",
                    "../../system/banner/img/ban2.png"
                ],{
                    // ismobile: false,//可選，不填則自動判斷客戶端，默認false - true / false(PC端/移動端)
                    arrowtype: 'move',	//可選，默認一直顯示 - 'move（移動端不支持）' / 'none'	(鼠標移上顯示 / 不顯示 )
                    autoplay: true,	//可選，默認true - true / false (開啓輪播/關閉輪播)
                    cantouch: true,//可選，默認true - true / false (開啓拖拽切換/關閉拖切換)
                    showpoint: true,//可選，默認true - true / false (顯示輪播點/關閉輪播點)
                    time:3000,	//可選，默認3000   也就是三秒輪動
                    pointClick:false,//是否開啓點擊小圓點同步到當前點擊小圓點的圖片顯示
					pointOver:true //是否開啓小圓點鼠標移入同步到當前點擊小圓點的圖片顯示
                },function(item){
                    //點擊圖片的時候，循環當前banner所有圖，拿到點擊的路徑
                    alert("圖片物理路徑："+$(item[0].innerHTML).attr("src"));
                    //根據路徑去得到該圖片對應的網絡路徑，進行跳轉
                },function(list){
                    //初始化完畢後，彈出對應的list集合
                }
            )
            //給所有圖片綁定樣式
            $("img").css("cursor","pointer");
        })

完事兒，非常好用，經過本人封裝後

效果：

不懂的請教QQ，1693940631