<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>

<!--定義ul其class指定為"pgwSlideshow"-->
<ul class="pgwSlideshow">
<!--src：標識輪播圖片的路徑-->
<!--alt：標識輪播圖片的標題-->
<!--data-description：標識輪播圖片的數(shù)據(jù)描述，顯示在標題的下方-->
<!--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  target="_blank"> 
<img src="monaco.jpg" alt="Monaco">
</a>
</li>
</ul>

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

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

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

<ul class="pgwSlideshow" id="pictureBox"></ul> 
$(function () {
var pictures = JSON.parse($("#anchorPictures").val()); //此處一般用ajax接受服務端返回數(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();
});