首頁--pgwSlideshow ...
<!DOCTYPE html>
<html>
<head id="Head">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<title>首頁--pgwSlideshow</title>
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="icon" href="favicon.ico" />
<link rel="bookmark" href="favicon.ico" type="image/gif" />
<meta name="author" content="geovindu,塗聚文,Geovin Du" />
<meta name="Robots" content="all index follow "/>
<meta name="keywords" content="{site.SeoKeyword}" />
<meta name="description" content="{site.SeoDescription}" />
<link rel="stylesheet" type="text/css" href="css/pgwslideshow.min.css" />
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<![endif]-->
<!--[if IE 6]>
<script type="text/javascript" src="js/ie7.js"></script>
<script type="text/javascript" src="js/DD_belatedPNG.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('.top img, .footer img, .bottom img, .form-btn, .module-icon-default');
</script>
<![endif]-->
<script type="text/javascript" charset="utf-8" src="scripts/jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/jquery/pgwslideshow.min.js"></script>
<script type="text/javascript">
//https://pgwjs.com/pgwslideshow/
// https://github.com/Pagawa/PgwSlideshow
$(document).ready(function() {
var option = {
mainClassName: 'pgwSlideshow', //用你的自定義css樣式來展現輪播圖
transitionEffect: 'sliding', //輪播圖切換時動畫效果，有兩個選項sliding（滑動效果）、fading（漸隱效果）
autoSlide: true, //是否允許輪播圖自動按照時間間隔輪播
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: 500 //顯示下一張圖片之前的間隔時間單位毫秒，該參數需要autoSlide為true
};
$('.pgwSlideshow').pgwSlideshow(option);
});
</script>
</head>
<body>
<ul class="pgwSlideshow">
<li><img src="images/san-francisco.jpg" alt="San Francisco, USA" data-description="Golden Gate Bridge"></li>
<li><img src="images/rio.jpg" alt="Rio de Janeiro, Brazil" data-description="里約熱內盧"></li>
<li><img src="images/london.jpg" alt="倫敦" data-description="london"></li>
<li><img src="images/new-york.jpg" alt="紐約" data-description="New York"></li>
<li><img src="images/new-delhi.jpg" alt="新德里" data-description="new delhi"></li>
<li><img src="images/paris.jpg" alt="巴黎" data-description="paris"></li>
<li><img src="images/sydney.jpg" alt="悉尼" data-description="sydney"></li>
<li><img src="images/tokyo.jpg" alt="東京" data-description="tokyo"></li>
<li><img src="images/honk-kong.jpg" alt="香港" data-description="HongKong"></li>
<li><img src="images/dakar.jpg" alt="達喀爾" data-description="dakar"></li>
<li><img src="images/toronto.jpg" alt="多倫多" data-description="toronto"></li>
<li>
<a href="http://en.wikipedia.org/wiki/Monaco" target="_blank">
<img src="images/monaco.jpg" alt="Monaco" data-description="摩納哥">
</a>
</li>
</ul>
</body>
</html>
