pgwSlideshow.js
程序员文章站
2022-05-18 11:02:08
首頁--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>
推荐阅读