<!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. docker实践之docker-compose部署mysql

    文章目录 docker实践之docker-compose部署mysql 1.安装部署docker 2.编写docker-compose文件 3.编写配置文件和初始化文件 4.启动数据库 5.检查初始化 ...

  3. 移动开发在路上-- IOS移动开发系列 多线程一

    类似于什么是进程什么是线程在这里我就不多浪费时间了(Google一下什么都有)! 废话不多说先上图,我相信大家都是喜欢看图的人,俗话说得好,求图求真相吗?虽然这里只有屌丝一个但是真相还是会有的... ...

  4. Ubuntu1604环境下编译安装mariadb10.2.26

    环境准备:阿里云ecs Ubuntu1604下,编译安装mariadb10-2.26 1.先安装一些初试环境所需要的工具软件包 apt install -y iproute2 ntpdate tcpd ...

  5. BZOJ [HNOI2006]鬼谷子的钱袋

    1192: [HNOI2006]鬼谷子的钱袋 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 5367  Solved: 3646[Submit][St ...

  6. Pandas里面常用的一些数据分析函数总结

    import pandas as pdimport numpy as np pandas 有两个主要的数据结构:Series 和 DataFrame:Series 是一个一维数组对象 ,它包含一组索引 ...

  7. Java关于赋值

    下面的程序有问题吗?如果有问题说明一下, 如果没有问题猜测一下运行结果: public static void main(String[] args){ short s = 1; s=s+1; Sys ...

  8. electron中JS报错：require is not defined的问题解决方法

    Electron已经发布了6.0正式版,升级后发现原来能运行的代码报错提示require is not defined 解决办法: 修改创建BrowserWindow部分的相关代码,设置属性webPr ...

  9. Linux系统入门简介<1>

    linux系统入门简介 我们为什么要学习Linux? 在介绍Linux的历史前,我想先针对大家如何对Linux的发音说一下.我发现我身边的朋友对Linux的发音大致有这么几种: "里那克斯& ...

  10. js简单动画：匀速动画、缓动动画、多物体动画以及透明度动画

    主要实现以下几种简单的动画效果(其实原理基本相同): 1.匀速动画:物体的速度固定 2.缓动动画:物体速度逐渐变慢 3.多物体动画 4.透明度动画 效果实现: 1.匀速动画(以物体左右匀速运动为例) ...