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


Posted in Javascript onAugust 11, 2016

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="~/Content/plugins/pgwSlideshow/pgwslideshow.min.css" type="text/css" rel="stylesheet" />
<script src="~/Content/js/jquery-2.1.4.min.js"></script>
<script src="~/Content/plugins/pgwSlideshow/pgwslideshow.min.js" type="text/javascript"></script>

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

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

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

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

1.1 定义Html元素结构

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

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

var pgwSlideshow = $('.pgwSlideshow').pgwSlideshow(); //获取轮播插件对象
pgwSlideshow.startSlide(); //控制轮播插件开始轮播
pgwSlideshow.stopSlide(); //控制轮播插件停止轮播
pgwSlideshow.getCurrentSlide(); //获取当前轮播图片的序号 
pgwSlideshow.getSlideCount(); //获取当前轮播插件包含的图片个数 
pgwSlideshow.displaySlide(3); //通过参数中的数值来显示指定序号的轮播图图片
pgwSlideshow.nextSlide(); //显示下一幅图片
pgwSlideshow.previousSlide(); //显示前一幅图片
pgwSlideshow.destroy(); //销毁轮播图对象。可通过可选的参数控制,如果传入参数true,那么容器只是被隐藏起来
pgwSlideshow.reload({ //使用新的配置参数来重新加载轮播图插件
transitionEffect: 'fading', 
adaptiveDuration: 4000 
});

1.4 加载服务端数据

加载服务端数据同样很简单,只需要根据服务端返回的数据,动态构造li标签,然后添加的ul元素中,接着调用pgwSlideshow()就行了。

<ul class="pgwSlideshow" id="pictureBox"></ul> 
$(function () {
var pictures = JSON.parse($("#anchorPictures").val()); //此处一般用ajax接受服务端返回数据
var html = ""
$.each(pictures, function (i, item) {
html += "<li><img src='" + item.AttachmentUrl + "' data-large-src='" + item.AttachmentUrl + "' alt='" + item.AttachmentName + "' data-description='" + item.AttachmentName + "'></li>";
});
$("#pictureBox").html(html);
$('.pgwSlideshow').pgwSlideshow();
});

以上所述是小编给大家介绍的jQuery的图片轮播插件PgwSlideshow使用详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
许愿墙中用到的函数
Oct 07 Javascript
JavaScript 解析读取XML文档 实例代码
Jul 07 Javascript
jquery 得到当前页面高度和宽度的两个函数
Feb 21 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
Aug 22 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
简单实现轮播图效果的实例
Jul 15 Javascript
vue实现div单选多选功能
Jul 16 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 Javascript
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 #Javascript
jQuery多个版本和其他js库冲突的解决方法
Aug 11 #Javascript
JS获取字符串实际长度(包含汉字)的简单方法
Aug 11 #Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 #Javascript
JavaScript性能优化总结之加载与执行
Aug 11 #Javascript
js接收并转化Java中的数组对象的方法
Aug 11 #Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 #Javascript
You might like
php Rename 更改文件、文件夹名称
2011/05/24 PHP
简单的PHP多图上传小程序代码
2011/07/17 PHP
如何使用Strace调试工具
2013/06/03 PHP
php读取文件内容到数组的方法
2015/03/16 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
用javascript实现给图片加链接
2007/08/15 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
jQuery Animation实现CSS3动画示例介绍
2013/08/14 Javascript
jquery $.each()使用探讨
2013/09/23 Javascript
javascript数据结构之二叉搜索树实现方法
2015/11/25 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
2015/11/26 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
python实现自动更换ip的方法
2015/05/05 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
2016/03/14 HTML / CSS
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
意大利男装网店:Vrients
2019/05/02 全球购物
安德玛菲律宾官网:Under Armour菲律宾
2020/07/28 全球购物
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
科研课题实施方案
2014/03/18 职场文书
初中作文评语大全
2014/04/23 职场文书
慈善晚会策划方案
2014/05/14 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
街道社区活动报告
2015/02/05 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书