jQuery照片轮播插件PgwSlideshow的详细说明

0 PgwSlideshow简介

PgwSlideshow是一个基于Jquery的照片轮播插件。基本布局分为上下结构，上部是一个大的图像轮播区。用户可以自定义照片轮播切换的间隔，也可以点击左右按钮切换图片；下面是旋转播放的所有图片的缩略图显示。可以直接点击缩略图快速切换图片。

PgwSlideshow主要有以下特点：

具有良好体验的响应性设计

支持桌面和移动设备

身体强壮，压缩文件小于4KB

您可以自定义或直接修改基本的css样式，以获得您想要的旋转木马插件的美感

显示核心文件：

Pgwslideshow.css/pgwslideshow.min.css默认风格文件pgwslideshow _ light.css/pgwslideshow _ light . min . CSS浅色风格文件pgwslideshow.js/pgwslideshow.min.js js文件

直观体验

1 PgwSlideshow用法

1.0添加相关文件引用

由于pgwslideshow依赖于jquery，因此pgwslideshow的基本用法需要在Html页面的头部添加以下引用

link href=' ~/Content/plugins/pgwSlideshow/pgwSlideshow . min . CSS ' type=' text/CSS ' rel='样式表'/脚本src=' http : ~/Content/js/Jquery-2 . 1 . 4 . min . js '/脚本src=' http : ~/Content/plugins/pgwSlideshow/pgwSlideshow . min . js ' type=' text/JavaScript '/script指的是

参考灯光颜色样式pgwslideshow_light.min.css的效果

1.1定义Html元素结构

Pgwslideshow采用ul元素，ul元素中的每个li标签标识一个转盘图片

！-定义ul，其类被指定为' pgwslideshow '-ul class=' pgwslideshow '！- src:识别旋转图片的路径-！- alt:标识转盘图片的标题-！-数据-描述：标识转盘图片的数据描述显示在标题下-！-data-large-src:标识转盘图像上部大图像的路径。如果未设置，默认情况下将使用src的图像路径-liimg src=' http : San-Francisco . jpg ' alt=' San Francisco '。USA' data-description='金门大桥'/Lili mg src=' http : Rio . jpg ' alt='巴西里约热内卢'/Lili mg src=' http : London _ mini . jpg ' alt=' ' data-large-src=' http : London . jpg '/Lili mg src=' http : new-York . jpg ' alt=' '/Lili mg src=' http : new-德里。-在这里，您可以用标签a包装img，并将您想要的超链接添加到旋转木马图片-a href=' http://target=' _ blank ' img src=' http 3360 Monaco . jpg ' alt=' Monaco '/a/Li/ul()

1.2插件的使用

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

$(文档)。ready(function() {$(')。pgwSlideshow’)。pgwSlideshow()；});当调用方法时，我们还可以根据需要进行一些配置

var option={ main class name : ' pgwslideshow '，//使用您自定义的css样式显示轮播转场效果：' sliding '的动画效果，//轮播切换时，有两个选项：滑动(滑动效果)和淡入(淡入效果)autoSlide: false，//是否允许轮播在slide3360之前自动轮播false根据时间间隔，//函数类型属性，轮播每次切换前的回调函数。例如' function(id) {console.log '(切换前的当前id ' id)；}幻灯片：后的“}”为false，//函数类型属性，转盘图每次切换后的回调函数。例如‘function(id){ console . log’(切换‘id’后的当前id)；}'displayList: true，//是否将缩略图displaycontrols :true显示为列表，//是否显示向前和向后翻页的按钮。TouchControls: true，//是否支持移动设备触摸翻页操作maxHeight: null，//设置轮播插件的最大高度，直接写数值即可，无需px单位transitionDuration: 500，///当图片被自动轮播时，图片切换的时间，unit毫秒interval : 3000//下一张图片显示前的间隔时间以毫秒为单位。此参数要求autoSlide为true}。$('.pgwSlideshow’)。pgwSlideshow(选项)；1.3一些常用的js方法

var pgwSlideshow=$('。pgwSlideshow’)。pgwSlideshow()；//获取轮播插件对象pgwslideshow . startslide()；//控制转盘插件启动转盘pgwslideshow . stop slide()；//控制转盘插件停止转盘pgwslideshow . getcurrentslide()；//获取当前轮播图片的序列号pgwslideshow . getslide count()；//获取当前轮播插件pgwSlideshow.displaySlide(3)中的图片数量；//通过参数中的数值显示指定序号的转盘图片pgwslideshow . next slide()；//显示下一张图片pgwslideshow . previousslide()；//显示上一张图片pgwslideshow . destroy()；//销毁转盘对象。它可以由可选参数控制。如果传入参数为真，则容器只是隐藏的pgwSlideshow.reload({ //用新的配置参数重新加载轮播插件Transition Effect :' Fading '，Adaptive Duration : 4000 })；1.4加载服务器数据

加载服务器数据也很简单，只需根据服务器返回的数据动态构造li标签，添加ul元素，然后调用pgwSlideshow()。

ul class=' pgwSlideshow ' id=' pictureBox '/ul $(function(){ var pictures=JSON . parse($(' # anchorPictures ')。val())；//这里，ajax一般用来接受服务器返回的数据。var html='' $。每个(图片，函数(I，item){ html=' liimg src=' item。AttachmentUrl“”数据-大-src=“”项。attachmentURl“”alt=”项。附件名称“”数据描述=“”项。附件名称' '/Li '；});$('#pictureBox ')。html(html)；$('.pgwSlideshow’)。pgwSlideshow()；});以上是边肖介绍的jQuery的照片轮播插件PgwSlideshow使用的详细说明。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！