jQuery的图片轮播插件PgwSlideshow使用详解

0 PgwSlideshow简介

PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键实现图片切换;下方为要轮播的所有图片的缩略图展示,可直接单击缩略图快速切换图片。

PgwSlideshow主要有以下特点:

•体验度很好的响应式设计

•支持桌面及移动设备

•身形矫健,压缩后的文件只有不到4KB

•你可以自定义或者直接修改基本的css样式来给你想要的轮播插件美个容

PgwSlideshow核心文件:

•pgwslideshow.css/pgwslideshow.min.css 默认的样式文件 •pgwslideshow_light.css/pgwslideshow_light.min.css 浅色系样式文件 •pgwslideshow.js/pgwslideshow.min.js js文件

直观体验

jQuery的图片轮播插件PgwSlideshow使用详解

1 PgwSlideshow使用

1.0 添加相关文件引用

由于pgwslideshow依赖于jquery,所以一个基本的pgwslideshow使用需要在你的Html页面的head中添加以下引用

<link href="https://www.jb51.net/~/Content/plugins/pgwSlideshow/pgwslideshow.min.css" type="text/css" /> <script src="https://www.jb51.net/~/Content/js/jquery-2.1.4.min.js"></script> <script src="https://www.jb51.net/~/Content/plugins/pgwSlideshow/pgwslideshow.min.js" type="text/javascript"></script>

引用默认样式pgwslideshow.min.css的效果

引用浅色系样式pgwslideshow_light.min.css的效果

1.1 定义Html元素结构

pgwslideshow采用ul元素,ul元素中的每一个li标签标识一张轮播图片

<!--定义ul其class指定为"pgwSlideshow"--> <ul> <!--src:标识轮播图片的路径--> <!--alt:标识轮播图片的标题--> <!--data-description:标识轮播图片的数据描述,显示在标题的下方--> <!--data-large-src:标识轮播图片的上方大图的路径,如不设置,默认采用src的图片路径--> <li><img src="https://www.jb51.net/san-francisco.jpg" alt="San Francisco, USA" data-description="Golden Gate Bridge"></li> <li><img src="https://www.jb51.net/rio.jpg" alt="Rio de Janeiro, Brazil"></li> <li><img src="https://www.jb51.net/london_mini.jpg" alt="" data-large-src="london.jpg"></li> <li><img src="https://www.jb51.net/new-york.jpg" alt=""></li> <li><img src="https://www.jb51.net/new-delhi.jpg" alt=""></li> <li><img src="https://www.jb51.net/paris.jpg" alt=""></li> <li><img src="https://www.jb51.net/sydney.jpg" alt=""></li> <li><img src="https://www.jb51.net/tokyo.jpg" alt=""></li> <li><img src="https://www.jb51.net/honk-kong.jpg" alt=""></li> <li><img src="https://www.jb51.net/dakar.jpg" alt=""></li> <li><img src="https://www.jb51.net/toronto.jpg" alt=""></li> <li> <!--此处可通过a标签包裹img,给轮播图片加上你想要的超链--> <a href="https://www.cnblogs.com/fonour" target="_blank"> <img src="https://www.jb51.net/monaco.jpg" alt="Monaco"> </a> </li> </ul>

jQuery的图片轮播插件PgwSlideshow使用详解

1.2 插件的使用

pgwslideshow的使用非常简单,只需通过ul元素调用pgwSlideshow()方法即可。

$(document).ready(function() { $('.pgwSlideshow').pgwSlideshow(); });

方法调用时,我们还可以根据需要做一些配置

var option = { mainClassName: 'pgwSlideshow', //用你的自定义css样式来展现轮播图 transitionEffect: 'sliding', //轮播图切换时动画效果,有两个选项sliding(滑动效果)、fading(渐隐效果) autoSlide: false, //是否允许轮播图自动按照时间间隔轮播 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: 3000 //显示下一张图片之前的间隔时间单位毫秒,该参数需要autoSlide为true }; $('.pgwSlideshow').pgwSlideshow(option);

1.3 一些常用的js方法

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzxzjz.html