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 相关文章推荐
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 Javascript
Javascript操作cookie的函数代码
Oct 03 Javascript
JavaScript?Apple设备检测示例代码
Nov 15 Javascript
javascript的回调函数应用示例
Feb 20 Javascript
js获取视频时长代码
Apr 10 Javascript
HTML,CSS,JavaScript速查表推荐
Dec 02 Javascript
浅谈jQuery中height与width
Jul 06 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
整理JavaScript创建对象的八种方法
Nov 03 Javascript
mpvue小程序循环动画开启暂停的实现方法
May 15 Javascript
Nuxt 项目性能优化调研分析
Nov 07 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 抽象类的简单应用
2011/09/06 PHP
php后退一页表单内容保存实现方法
2012/06/17 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
学习php中的正则表达式
2014/08/17 PHP
PHP访问Google Search API的方法
2015/03/05 PHP
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
location.href用法总结(最主要的)
2013/12/27 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
推荐一个自己用的封装好的javascript插件
2015/01/29 Javascript
jQuery操作cookie
2016/08/08 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
webpack处理 css\less\sass 样式的方法
2017/08/21 Javascript
jQuery实现html双向绑定功能示例
2017/10/09 jQuery
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
Python实现决策树并且使用Graphviz可视化的例子
2019/08/09 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
python 通过邮件控制实现远程控制电脑操作
2020/03/16 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
美国杂志订阅折扣与优惠网站:Magazines.com
2016/08/31 全球购物
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
仓库保管员岗位职责
2013/12/20 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
写给老婆的保证书
2015/02/27 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
Python如何配置环境变量详解
2021/05/18 Python
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python