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 相关文章推荐
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
FireFox下XML对象转化成字符串的解决方法
Dec 09 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
浅谈javascript中的闭包
May 13 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
js仿腾讯QQ的web登陆界面
Aug 19 Javascript
js图片切换具体实现代码
Oct 13 Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
深入理解Vue Computed计算属性原理
May 29 Javascript
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 curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
js AspxButton的客户端操作
2009/06/26 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
2016/08/24 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
layui导航栏实现代码
2017/05/19 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
讲解python参数和作用域的使用
2013/11/01 Python
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
Python分治法定义与应用实例详解
2017/07/28 Python
Python实现时钟显示效果思路详解
2018/04/11 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
python开启debug模式的方法
2019/06/27 Python
python笔记之mean()函数实现求取均值的功能代码
2019/07/05 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
印度领先的在线时尚商店:Koovs
2016/08/28 全球购物
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
企业挂职心得体会
2014/09/10 职场文书
党支部对转正的意见
2015/06/02 职场文书
vue+element ui实现锚点定位
2021/06/29 Vue.js