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