pgwSlideshow.js

<!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

最新文章

热门文章
