友情鏈接：http://www.htmleaf.com/Demo/201504031619.html

? ? ? ? ? ? ??http://www.htmleaf.com/Demo/201504191708.html

0 PgwSlideshow簡(jiǎn)介

PgwSlideshow是一款基于Jquery的圖片輪播插件，基本布局分為上下結(jié)構(gòu)，上方為大圖輪播區(qū)域，用戶可自定義圖片輪播切換的間隔時(shí)間，也可以通過(guò)單擊左右方向按鍵實(shí)現(xiàn)圖片切換；下方為要輪播的所有圖片的縮略圖展示，可直接單擊縮略圖快速切換圖片。

PgwSlideshow主要有以下特點(diǎn)：

• 體驗(yàn)度很好的響應(yīng)式設(shè)計(jì)
• 支持桌面及移動(dòng)設(shè)備
• 身形矯健，壓縮后的文件只有不到4KB
• 你可以自定義或者直接修改基本的css樣式來(lái)給你想要的輪播插件美個(gè)容

PgwSlideshow核心文件：

• pgwslideshow.css/pgwslideshow.min.css 默認(rèn)的樣式文件
• pgwslideshow_light.css/pgwslideshow_light.min.css 淺色系樣式文件
• pgwslideshow.js/pgwslideshow.min.js js文件

直觀體驗(yàn)

1 PgwSlideshow使用

1.0 添加相關(guān)文件引用

由于pgwslideshow依賴(lài)于jquery，所以一個(gè)基本的pgwslideshow使用需要在你的Html頁(yè)面的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>

引用默認(rèn)樣式pgwslideshow.min.css的效果

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

1.1 定義Html元素結(jié)構(gòu)

pgwslideshow采用ul元素，ul元素中的每一個(gè)li標(biāo)簽標(biāo)識(shí)一張輪播圖片

<!--定義ul其class指定為"pgwSlideshow"--><ul class="pgwSlideshow"><!--src：標(biāo)識(shí)輪播圖片的路徑--><!--alt：標(biāo)識(shí)輪播圖片的標(biāo)題--><!--data-description：標(biāo)識(shí)輪播圖片的數(shù)據(jù)描述，顯示在標(biāo)題的下方--><!--data-large-src：標(biāo)識(shí)輪播圖片的上方大圖的路徑，如不設(shè)置，默認(rèn)采用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><!--此處可通過(guò)a標(biāo)簽包裹img，給輪播圖片加上你想要的超鏈--><a href="http://www.cnblogs.com/fonour" target="_blank"> <img src="monaco.jpg" alt="Monaco"></a></li></ul>

1.2 插件的使用

pgwslideshow的使用非常簡(jiǎn)單，只需通過(guò)ul元素調(diào)用pgwSlideshow()方法即可。

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

方法調(diào)用時(shí)，我們還可以根據(jù)需要做一些配置

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

1.3 一些常用的js方法

var pgwSlideshow = $('.pgwSlideshow').pgwSlideshow(); //獲取輪播插件對(duì)象pgwSlideshow.startSlide(); //控制輪播插件開(kāi)始輪播pgwSlideshow.stopSlide(); //控制輪播插件停止輪播pgwSlideshow.getCurrentSlide(); //獲取當(dāng)前輪播圖片的序號(hào) pgwSlideshow.getSlideCount(); //獲取當(dāng)前輪播插件包含的圖片個(gè)數(shù) pgwSlideshow.displaySlide(3); //通過(guò)參數(shù)中的數(shù)值來(lái)顯示指定序號(hào)的輪播圖圖片pgwSlideshow.nextSlide(); //顯示下一幅圖片pgwSlideshow.previousSlide(); //顯示前一幅圖片pgwSlideshow.destroy(); //銷(xiāo)毀輪播圖對(duì)象。可通過(guò)可選的參數(shù)控制，如果傳入?yún)?shù)true，那么容器只是被隱藏起來(lái)pgwSlideshow.reload({ //使用新的配置參數(shù)來(lái)重新加載輪播圖插件transitionEffect: 'fading', adaptiveDuration: 4000 });

1.4 加載服務(wù)端數(shù)據(jù)

加載服務(wù)端數(shù)據(jù)同樣很簡(jiǎn)單，只需要根據(jù)服務(wù)端返回的數(shù)據(jù)，動(dòng)態(tài)構(gòu)造li標(biāo)簽，然后添加的ul元素中，接著調(diào)用pgwSlideshow()就行了。

<ul class="pgwSlideshow" id="pictureBox"></ul> $(function () {var pictures = JSON.parse($("#anchorPictures").val()); //此處一般用ajax接受服務(wù)端返回?cái)?shù)據(jù)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(); }); 《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專(zhuān)家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的PgwSlideshow-基于Jquery的图片轮播插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。