<!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="data:images/san-francisco.jpg" alt="San Francisco, USA" data-description="Golden Gate Bridge"></li>

    <li><img src="data:images/rio.jpg" alt="Rio de Janeiro, Brazil" data-description="里约热内卢"></li>

    <li><img src="data:images/london.jpg" alt="伦敦" data-description="london"></li>

    <li><img src="data:images/new-york.jpg" alt="纽约" data-description="New York"></li>

    <li><img src="data:images/new-delhi.jpg" alt="新德里" data-description="new delhi"></li>

    <li><img src="data:images/paris.jpg" alt="巴黎" data-description="paris"></li>

    <li><img src="data:images/sydney.jpg" alt="悉尼" data-description="sydney"></li>

    <li><img src="data:images/tokyo.jpg" alt="东京" data-description="tokyo"></li>

    <li><img src="data:images/honk-kong.jpg" alt="香港" data-description="HongKong"></li>

    <li><img src="data:images/dakar.jpg" alt="达喀尔" data-description="dakar"></li>

    <li><img src="data:images/toronto.jpg" alt="多伦多" data-description="toronto"></li>

    <li>

        <a href="http://en.wikipedia.org/wiki/Monaco" target="_blank">

            <img src="data:images/monaco.jpg" alt="Monaco" data-description="摩纳哥">

        </a>

    </li>

</ul>

</body>

</html>

　　

pgwSlideshow.js的更多相关文章

  1. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  2. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  3. js学习笔记：操作iframe

    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...

  4. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  5. JS调用Android、Ios原生控件

    在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...

  6. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  7. 利用snowfall.jquery.js实现爱心满屏飞

    小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...

  8. node.js学习（三）简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

  9. JS正则表达式常用总结

    正则表达式的创建 JS正则表达式的创建有两种方式: new RegExp() 和 直接字面量. //使用RegExp对象创建 var regObj = new RegExp("(^\\s+) ...

随机推荐

  1. iOS包管理工具Cocoapods的安装与使用

    转自:http://www.sxt.cn/u/10014/blog/6448 在我们开发移动应用的时候,一般都会使用到第三方工具,而由于第三方类库的种类繁多,我们在项目中进行管理也会相对麻烦,所以此时 ...

  2. jQuery中的基本选择器，id，class，元素，通用

    常用的基本选择器: 后续的补充选择器 为了后面看的方便,我们先将body中的内容展示出来: <body> <p> 账号:<input type="text&qu ...

  3. XCode项目配置

    此设置优先级在playersetting之上,如果为空或者格式不正确或者文件不存在将不会设置,请注意 一.设置面板 二.对应Xcode中设置 1.TeamID  登录苹果开发者网站,查看个人信息,就有 ...

  4. Python流程控制之分支结构

    目录 if/else结构 多重if结构 嵌套if结构 练习 if/else结构 if如果,else否则 # java if(){ }else{ } # python if 条件: 语句 else: 语 ...

  5. Vue AES+MD5加密 后台解密

    前端VUE vue项目中安装crypto-js npm install crypto-js --save-dev CryptoJS (crypto.js) 为 JavaScript 提供了各种各样的加 ...

  6. 视频来了！Visual Studio Online 东半球首秀 @ .NET Conf 2019

    2019 年 11 月 9 日,.NET Conf 2019 中国峰会于上海中谷小南国花园酒店举行,全国的 .NET 大咖相聚上海. 这次我演讲的主题是<Visual Studio Code — ...

  7. 据说60%的Java程序员不明白分布式一致性？这次彻底搞懂！

    前言 在计算机科学领域,分布式一致性是一个相当重要且被广泛探索与论证问题,首先来看三种业务场景. 1.火车站售票 假如说我们的终端用户是一位经常坐火车的旅行家,通常他是去车站的售票处购买车票,然后拿着 ...

  8. HPS端的GPIO如何控制

    该笔记主要记录HPS端的GPIO如何控制,包括控制LED和Key 1.GPIO地址映射 Peripheral Base Address 0xf000_0000 64M 2.HPS外设 (1)GPIO ...

  9. ELK 理论小知识

    ELK 是现阶段众多企业单位都在使用的一种日志分析系统,它能够方便的为我们收集你想要的日志并且展示出来 ELK是Elasticsearch.Logstash.Kibana的简称,这三者都是开源软件,通 ...

  10. SQL- SQL查询检索阶段一

    一 说明 如果是初学者,建议去网上寻找安装Mysql的文章安装,以及使用navicat连接数据库,以后的示例基本是使用mysql数据库管理系统: 二 准备前提 需要建立一张学生表,列分别是id,名称, ...