<!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 textView的使用总结

    转自:http://blog.csdn.net/zhaopenghhhhhh/article/details/11597887 在.h文件中声明: @interface ProtocolViewCon ...

  2. 用JS实现HTML转PDF

    遇到这个需求,现把实现代码整理出来,方便大家参考 <!-- html转PDF --> <script src="https://cdnjs.cloudflare.com/a ...

  3. PDF怎么删除页面？教你两个超级好用的方法

    在日常办公中,由于工作需要我们有时候会对PDF文件中的内容进行二次编辑,可能需要删除PDF文件中的一些页面.那么PDF怎么删除页面呢?小伙伴们还在为这个问题苦恼吗?那么今天小编就来教大家两个超级好用的 ...

  4. CF 17E Palisection 求相交回文串个数

    In an English class Nick had nothing to do at all, and remembered about wonderful strings called pal ...

  5. CoderForces985F-Isomorphic Strings

    F. Isomorphic Strings time limit per test 3 seconds memory limit per test 256 megabytes input standa ...

  6. A.Single Push

    题目:简单推动 题意:你被给予两个相同长度为n的数组a[1...n]和b[1...n] 目的是进行一个推入操作,你会选择l,r,k三个数字满足1 <= l <= r <= n 还有 ...

  7. PG数计算

    PG数计算 原地址:http://xiaqunfeng.cc/2017/09/15/too-many-PGs-per-OSD/ ceph告警问题:”too many PGs per OSD” 的解决方 ...

  8. vs里 .sln和.suo 文件 Visual Studio里*.sln和*.suo文件的作用

    Visual Studio里*.sln和*.suo文件的作用      VS项目采用两种文件类型(.sln   和   .suo)来存储特定于解决方案的设置.这些文件总称为解决方案文件,为解决方案资源 ...

  9. php 温故而知新 好久不用 又得继续学习下

    1.php注释:/* */.//.#等三种方式2.echo:向浏览器输出字符串,echo其实是一个函数:返回值:无3.print:向浏览器输出字符串,它也是一个函数:返回值:整型.           ...

  10. ruby 使用 rqrcode 生成二维码

    参考:  https://github.com/whomwah/rqrcode 1.  gem 'rqrcode' 2.  在helper中: require 'base64' def generat ...