如何讓excel數字變成大寫
1031
2023-11-21
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 type="text/css" rel="stylesheet" /> <script src="http://www.gimoo.net/t/1901/~/Content/js/jquery-2.1.4.min.js"></script> <script src="http://www.gimoo.net/t/1901/~/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="http://www.gimoo.net/t/1901/san-francisco.jpg" alt="San Francisco, USA" data-description="Golden Gate Bridge"></li> <li><img src="http://www.gimoo.net/t/1901/rio.jpg" alt="Rio de Janeiro, Brazil"></li> <li><img src="http://www.gimoo.net/t/1901/london_mini.jpg" alt="" data-large-src="http://www.gimoo.net/t/1901/london.jpg"></li> <li><img src="http://www.gimoo.net/t/1901/new-york.jpg" alt=""></li> <li><img src="http://www.gimoo.net/t/1901/new-delhi.jpg" alt=""></li> <li><img src="http://www.gimoo.net/t/1901/paris.jpg" alt=""></li> <li><img src="http://www.gimoo.net/t/1901/sydney.jpg" alt=""></li> <li><img src="http://www.gimoo.net/t/1901/tokyo.jpg" alt=""></li> <li><img src="http://www.gimoo.net/t/1901/honk-kong.jpg" alt=""></li> <li><img src="http://www.gimoo.net/t/1901/dakar.jpg" alt=""></li> <li><img src="http://www.gimoo.net/t/1901/toronto.jpg" alt=""></li> <li> <此處可通過a標簽包裹img，給輪播圖片加上你想要的超鏈--> <a target="_blank"> <img src="http://www.gimoo.net/t/1901/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='http://www.gimoo.net/t/1901/5c36e849b16a6.html" + item.AttachmentUrl + "' data-large-src='http://www.gimoo.net/t/1901/5c36e849b16a6.html" + item.AttachmentUrl + "' alt='" + item.AttachmentName + "' data-description='" + item.AttachmentName + "'></li>";
});
$("#pictureBox").html(html);
$('.pgwSlideshow').pgwSlideshow();
});
以上所述是小編給大家介紹的jQuery的圖片輪播插件PgwSlideshow使用詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對綠夏網網站的支持！
