<!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. IPV6-ONLY

    1.ipv4地址已经耗尽,未来可能只支持ipv6-only. 2.在一个纯IPV6环境下,路由器会自动将IPV4地址转成IPv6地址. 苹果这样要求,对于大多数开发者而言,并不困难.目前大多数应用无需 ...

  2. 在mac上如何用safari浏览器调试ios手机的移动端页面

    第一步 打开iphone手机的开发者模式,流程是:[设置]->[Safari]->[高级]->开启[Web检查器] 第二步 打开Mac上Safari的开发者模式,流程是[Safari ...

  3. HDU1217-Arbitrage(乘法最短路)

    Arbitrage is the use of discrepancies in currency exchange rates to transform one unit of a currency ...

  4. ARTS-S sed指定行添加

    sed -i 's#^AAAA.*#&BBBB#g' a.txt 在以AAA开始的行懂添加BBBB

  5. 递归的实际业务场景之MySQL 递归查询

    喜欢就点个赞呗! 源码<--请点击此处查看 引入 当我看到一些评论时,例如下面的样子.我挺好奇这个功能是怎么样做出来的.进过查阅资料,发现这其实是 MySQL 的递归操作.下面就让我操作一下怎么 ...

  6. rails 5 功能新增及改变

    1.ApplicationRecord 在Rails4中所有的模型都继承自ActiveRecord::Base,不过在Rails5中新引进了一个叫ApplicationRecord的类,存放在: ap ...

  7. Java_编写99乘法表

    public class Work100{ public static void main(String[] args){ // 积 int mu = 0; for(int i=1;i<10;i ...

  8. 开局一张图，学一学项目管理神器Maven！

    Maven强大的Java工程构建工具,做Java开发时少了跟Maven打交道,之前在知乎上看到有人提问:"学Java开发需不需要学习Maven?",个人认为是必需要学的,这和工欲善 ...

  9. Linux-部署-Django

    Linux-部署-Django-项目过程与问题总结 优才网 2017-04-12 18:00   本篇主要用于记录部署 Django 项目所有踩过的坑. 最近学习 Django 框架开发,将项目部署到 ...

  10. 【RabbitMQ】使用学习

    [RabbitMQ]使用学习 转载: ============================================================= =================== ...