pgwSlideshow.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!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>

　　

posted @   ®Geovin Du Dream Park™  阅读(367)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
历史上的今天：
2011-05-06 C# Image Download
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示