PgwSlideshow-基於Jquery的圖片輪播插件

0 PgwSlideshow簡介

PgwSlideshow是一款基於Jquery的圖片輪播插件，基本布局分為上下結構，上方為大圖輪播區域，用戶可自定義圖片輪播切換的間隔時間，也可以通過單擊左右方向按鍵實現圖片切換；下方為要輪播的所有圖片的縮略圖展示，可直接單擊縮略圖快速切換圖片。

PgwSlideshow主要有以下特點：

• 體驗度很好的響應式設計
• 支持桌面及移動設備
• 身形矯健，壓縮后的文件只有不到4KB
• 你可以自定義或者直接修改基本的css樣式來給你想要的輪播插件美個容

PgwSlideshow核心文件：

• pgwslideshow.css/pgwslideshow.min.css 默認的樣式文件
• pgwslideshow_light.css/pgwslideshow_light.min.css 淺色系樣式文件
• pgwslideshow.js/pgwslideshow.min.js js文件

直觀體驗

1 PgwSlideshow使用

1.0 添加相關文件引用

由於pgwslideshow依賴於jquery，所以一個基本的pgwslideshow使用需要在你的Html頁面的head中添加以下引用

<link href="~/Content/plugins/pgwSlideshow/pgwslideshow.min.css" type="text/css" rel="stylesheet" />
<script src="~/Content/js/jquery-2.1.4.min.js"></script>
<script src="~/Content/plugins/pgwSlideshow/pgwslideshow.min.js" type="text/javascript"></script>

引用默認樣式pgwslideshow.min.css的效果

引用淺色系樣式pgwslideshow_light.min.css的效果

1.1 定義Html元素結構

pgwslideshow采用ul元素，ul元素中的每一個li標簽標識一張輪播圖片

<!--定義ul其class指定為"pgwSlideshow"-->
    <ul class="pgwSlideshow">
        <!--src：標識輪播圖片的路徑-->
        <!--alt：標識輪播圖片的標題-->
        <!--data-description：標識輪播圖片的數據描述，顯示在標題的下方-->
        <!--data-large-src：標識輪播圖片的上方大圖的路徑，如不設置，默認采用src的圖片路徑-->
        <li><img src="san-francisco.jpg" alt="San Francisco, USA" data-description="Golden Gate Bridge"></li>
        <li><img src="rio.jpg" alt="Rio de Janeiro, Brazil"></li>
        <li><img src="london_mini.jpg" alt="" data-large-src="london.jpg"></li>
        <li><img src="new-york.jpg" alt=""></li>
        <li><img src="new-delhi.jpg" alt=""></li>
        <li><img src="paris.jpg" alt=""></li>
        <li><img src="sydney.jpg" alt=""></li>
        <li><img src="tokyo.jpg" alt=""></li>
        <li><img src="honk-kong.jpg" alt=""></li>
        <li><img src="dakar.jpg" alt=""></li>
        <li><img src="toronto.jpg" alt=""></li>
        <li>
            <!--此處可通過a標簽包裹img，給輪播圖片加上你想要的超鏈-->
            <a href="http://www.cnblogs.com/fonour" target="_blank"> 
                <img src="monaco.jpg" alt="Monaco">
            </a>
        </li>
    </ul>

1.2 插件的使用

pgwslideshow的使用非常簡單，只需通過ul元素調用pgwSlideshow()方法即可。

$(document).ready(function() {
        $('.pgwSlideshow').pgwSlideshow();
});

方法調用時，我們還可以根據需要做一些配置

var option = {
       mainClassName: 'pgwSlideshow',   //用你的自定義css樣式來展現輪播圖
        transitionEffect: 'sliding',     //輪播圖切換時動畫效果，有兩個選項sliding（滑動效果）、fading（漸隱效果）
        autoSlide: false,                //是否允許輪播圖自動按照時間間隔輪播
        beforeSlide: false,              //function類型屬性，在輪播圖每次切換前的回調函數。如"function(id) { console.log('切換前，當前id' + id); }"
       afterSlide: false,               //function類型屬性，在輪播圖每次切換后的回調函數。如"function(id) { console.log('切換后，當前id' + id); }"
       displayList: true,               //是否以列表的形式顯示縮略圖
        displayControls: true,           //是否顯示向前，向后翻頁的按鈕。
        touchControls: true,             //是否支持移動設備觸摸翻頁操作
        maxHeight: null,                 //設置輪播插件的最大高度，直接寫數值即可，不需要帶px單位
        transitionDuration: 500,         //圖片自動輪播時，圖片切換的時間，單位毫秒
        intervalDuration: 3000           //顯示下一張圖片之前的間隔時間單位毫秒，該參數需要autoSlide為true
    };
    $('.pgwSlideshow').pgwSlideshow(option);

1.3 一些常用的js方法

   var pgwSlideshow = $('.pgwSlideshow').pgwSlideshow(); //獲取輪播插件對象
    pgwSlideshow.startSlide();          //控制輪播插件開始輪播
    pgwSlideshow.stopSlide();           //控制輪播插件停止輪播
    pgwSlideshow.getCurrentSlide();     //獲取當前輪播圖片的序號 
    pgwSlideshow.getSlideCount();       //獲取當前輪播插件包含的圖片個數  
    pgwSlideshow.displaySlide(3);       //通過參數中的數值來顯示指定序號的輪播圖圖片
    pgwSlideshow.nextSlide();           //顯示下一幅圖片
    pgwSlideshow.previousSlide();       //顯示前一幅圖片
    pgwSlideshow.destroy();             //銷毀輪播圖對象。可通過可選的參數控制，如果傳入參數true，那么容器只是被隱藏起來
    pgwSlideshow.reload({               //使用新的配置參數來重新加載輪播圖插件
        transitionEffect: 'fading',   
        adaptiveDuration: 4000          
    });

1.4 加載服務端數據

加載服務端數據同樣很簡單，只需要根據服務端返回的數據，動態構造li標簽，然后添加的ul元素中，接着調用pgwSlideshow()就行了。

<ul class="pgwSlideshow" id="pictureBox"></ul>

$(function () {
    var pictures = JSON.parse($("#anchorPictures").val()); //此處一般用ajax接受服務端返回數據
    var html = ""
    $.each(pictures, function (i, item) {
        html += "<li><img src='" + item.AttachmentUrl + "' data-large-src='" + item.AttachmentUrl + "' alt='" + item.AttachmentName + "' data-description='" + item.AttachmentName + "'></li>";

    });
    $("#pictureBox").html(html);
    $('.pgwSlideshow').pgwSlideshow();
});