经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
pgwSlideshow.js
来源:cnblogs  作者:?Geovin Du Dream Park?  时间:2019/5/7 8:51:30  对本文有异议
  1. <!DOCTYPE html>
  2. <html>
  3. <head id="Head">
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
  6. <title>首頁--pgwSlideshow</title>
  7. <link rel="shortcut icon" href="/favicon.ico" />
  8. <link rel="icon" href="favicon.ico" />
  9. <link rel="bookmark" href="favicon.ico" type="image/gif" />
  10. <meta name="author" content="geovindu,塗聚文,Geovin Du" />
  11. <meta name="Robots" content="all index follow "/>
  12. <meta name="keywords" content="{site.SeoKeyword}" />
  13. <meta name="description" content="{site.SeoDescription}" />
  14.  
  15. <link rel="stylesheet" type="text/css" href="css/pgwslideshow.min.css" />
  16. <!--[if lt IE 9]>
  17. <script src="js/html5.js"></script>
  18. <![endif]-->
  19. <!--[if IE 6]>
  20. <script type="text/javascript" src="js/ie7.js"></script>
  21. <script type="text/javascript" src="js/DD_belatedPNG.js"></script>
  22. <script type="text/javascript">
  23. DD_belatedPNG.fix('.top img, .footer img, .bottom img, .form-btn, .module-icon-default');
  24. </script>
  25. <![endif]-->
  26. <script type="text/javascript" charset="utf-8" src="scripts/jquery/jquery-1.11.2.min.js"></script>
  27. <script type="text/javascript" charset="utf-8" src="scripts/jquery/pgwslideshow.min.js"></script>
  28. <script type="text/javascript">
  29. //https://pgwjs.com/pgwslideshow/
  30. // https://github.com/Pagawa/PgwSlideshow
  31. $(document).ready(function() {
  32. var option = {
  33. mainClassName: 'pgwSlideshow', //用你的自定义css样式来展现轮播图
  34. transitionEffect: 'sliding', //轮播图切换时动画效果,有两个选项sliding(滑动效果)、fading(渐隐效果)
  35. autoSlide: true, //是否允许轮播图自动按照时间间隔轮播
  36. beforeSlide: false, //function类型属性,在轮播图每次切换前的回调函数。如"function(id) { console.log('切换前,当前id' + id); }"
  37. afterSlide: false, //function类型属性,在轮播图每次切换后的回调函数。如"function(id) { console.log('切换后,当前id' + id); }"
  38. displayList: true, //是否以列表的形式显示缩略图
  39. displayControls: true, //是否显示向前,向后翻页的按钮。
  40. touchControls: true, //是否支持移动设备触摸翻页操作
  41. maxHeight: null, //设置轮播插件的最大高度,直接写数值即可,不需要带px单位
  42. transitionDuration: 500, //图片自动轮播时,图片切换的时间,单位毫秒
  43. intervalDuration: 500 //显示下一张图片之前的间隔时间单位毫秒,该参数需要autoSlide为true
  44. };
  45.  
  46. $('.pgwSlideshow').pgwSlideshow(option);
  47. });
  48. </script>
  49. </head>
  50.  
  51. <body>
  52. <ul class="pgwSlideshow">
  53. <li><img src="images/san-francisco.jpg" alt="San Francisco, USA" data-description="Golden Gate Bridge"></li>
  54. <li><img src="images/rio.jpg" alt="Rio de Janeiro, Brazil" data-description="里约热内卢"></li>
  55. <li><img src="images/london.jpg" alt="伦敦" data-description="london"></li>
  56. <li><img src="images/new-york.jpg" alt="纽约" data-description="New York"></li>
  57. <li><img src="images/new-delhi.jpg" alt="新德里" data-description="new delhi"></li>
  58. <li><img src="images/paris.jpg" alt="巴黎" data-description="paris"></li>
  59. <li><img src="images/sydney.jpg" alt="悉尼" data-description="sydney"></li>
  60. <li><img src="images/tokyo.jpg" alt="东京" data-description="tokyo"></li>
  61. <li><img src="images/honk-kong.jpg" alt="香港" data-description="HongKong"></li>
  62. <li><img src="images/dakar.jpg" alt="达喀尔" data-description="dakar"></li>
  63. <li><img src="images/toronto.jpg" alt="多伦多" data-description="toronto"></li>
  64. <li>
  65. <a href="http://en.wikipedia.org/wiki/Monaco" target="_blank">
  66. <img src="images/monaco.jpg" alt="Monaco" data-description="摩纳哥">
  67. </a>
  68. </li>
  69. </ul>
  70. </body>
  71.  
  72. </html>

  

原文链接:http://www.cnblogs.com/geovindu/p/10821146.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号