超酷响应式带缩略图的jQuery轮播图插件


PgwSlideshow是一款非常实用的响应式、支持触摸屏的jQuery轮播图插件。该轮播图插件带有缩略图预览效果,可以根据容器的大小自适应图片的宽度。你也可以自定义轮播图的高度,图...
PgwSlideshow是一款非常实用的响应式、支持触摸屏的jQuery轮播图插件。该轮播图插件带有缩略图预览效果,可以根据容器的大小自适应图片的宽度。你也可以自定义轮播图的高度,图片宽度会根据高度等比例匹配。

查看演示 下载插件


该轮播图插件的特点有:
  • 响应式设计
  • 支持桌面和移动手机设备
  • 轻量级,压缩后只有4kb
  • 可以通过CSS来自定义轮播图的样式
使用方法
该轮播图插件依赖于jQuery(1.0以上版本)或Zepto(1.0以上版本)。使用前要移入这些依赖文件。

  1. <link rel="stylesheet" href="/path/to/pgwslideshow.css">
  2. <script src="jquery/1.11.0/jquery.min.js"></script>
  3. <script src="/path/to/pgwslideshow.js"></script>               
复制代码
HTML结构

该轮播图插件的基本HTML结构使用的是无序列表<ul>。你可以添加多个<li>元素,每一个<li>元素中包含一张用于轮播的图片。

  1. <ul class="pgwSlideshow">
  2.     <li><img src="img/1.jpg" alt="..." data-description="..."></li>
  3.     <li><img src="img/thumb.jpg" alt="" data-large-src="img/big-img.jpg"></li>
  4.     <li>
  5.         <a href="#" target="_blank">
  6.             <img src="img/3.jpg" alt="...">
  7.         </a>
  8.     </li>
  9.     ......
  10. </ul>  
复制代码
  • alt:这个属性定义图片的标题,它会在图片显示的时候作为标题显示。
  • data-description:该属性会在图片标题下方添加一行新的文本,用于额外的描述信息。
  • data-large-src:如果你希望缩略图使用小尺寸的图片,显示的是大尺寸的图片,就可以使用data-large-src属性来指定大尺寸图片的URL。
另外,如果你希望某张图片链接到特定的URL,可以使用<a>标签来包裹图片,每张图片都可以单独设置它的对应链接地址。

调用插件

  1. $(document).ready(function() {
  2.         $('.pgwSlideshow').pgwSlideshow();
  3.     });        
复制代码
配置参数

下面是该轮播图插件的一些可用的参数。


方法

下面是该轮播图插件的一些可用方法。

要使用这些方法,必须在轮播图插件初始化时将它保存为一个对象变量。

  1. var pgwSlideshow = $('.pgwSlideshow').pgwSlideshow();     
复制代码
startSlide :轮播图开始播放。

  1. pgwSlideshow.startSlide();  
复制代码
stopSlide :停止轮播图的播放。

  1. pgwSlideshow.stopSlide();  
复制代码
getCurrentSlide :返回当前轮播图片的序号。

  1. pgwSlideshow.getCurrentSlide();  
复制代码
getSlideCount :返回轮播图中图片的总数。

  1. pgwSlideshow.getSlideCount();
复制代码
displaySlide :通过参数中的数值来显示指定序号的轮播图图片。

  1. pgwSlideshow.displaySlide(3);
复制代码
nextSlide :显示下一幅图片。


  1. pgwSlideshow.nextSlide();
复制代码

previousSlide :显示前一幅图片。


  1. pgwSlideshow.previousSlide();
复制代码

destroy :销毁轮播图对象。如果传入参数true,那么容器将只是被隐藏起来。

更多 轮播 相关资讯

jQuery轮播切换组件 可播放多张图片

jQuery轮播切换组件 可播放多张图片

这是一款基于jQuery的图片轮播组件,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片。当然,你也可以手动切换图片,只要点击

jQuery自动轮播图片焦点图插件

jQuery自动轮播图片焦点图插件

今天我们要继续来分享一款非常实用的jQuery焦点图插件,和其他的jQuery焦点图插件一样,它同样支持多张图片的任意跳转切换,同时,焦点图切换方式是水平的,而且相当流畅,因为这款jQue

jQuery全屏图片轮播插件fullpage.js

jQuery全屏图片轮播插件fullpage.js

jQuery全屏图片轮播插件fullpage.js查看演示 立刻下载 浏览器兼容性

适合网友学习的Jquery图片轮播插件

适合网友学习的Jquery图片轮播插件

     这是一款图片轮播Jquery插件,功能比较齐全,而且插件代码很简洁,每个功能的注释都写得非常详细,非常适合网友们的学习。   主要包括了以下功能:   1、图片轮播效果

更多 缩略图 相关资讯

jQuery垂直缩略图相册插件 支持鼠标滑动翻页

jQuery垂直缩略图相册插件 支持鼠标滑动翻页

这是一款支持鼠标拖拽的jQuery相册插件,这款jQuery相册的特点是右侧有一排垂直的缩略图,可以定义任意数量的图片,并且可以使用鼠标拖拽来对缩略图进行翻页浏览。另外,相

jQuery上下切换焦点图 带缩略图悬浮

jQuery上下切换焦点图 带缩略图悬浮

今天我们继续为大家分享一款小巧而实用的jQuery焦点图,它的切换效果比较简单,仅仅是作图片的上下切换,但是效果还是比较流畅的。这款jQuery焦点图插件的另外一个特点是在

右侧带缩略图导航的jQuery焦点图

右侧带缩略图导航的jQuery焦点图

今天我们要来分享一款右侧带缩略图导航的jQuery焦点图插件,这款jQuery焦点图插件的特点是右侧有一列缩略图导航列表,并且可以定义任意数量的图片,你可以拖动列表来查看所

jQuery/CSS3实现拼图效果的相册插件

jQuery/CSS3实现拼图效果的相册插件

今天我们要来分享一款很酷的jQuery相册插件,首先相册中的图片会以一定的角度倾斜放置在页面上,点击图片缩略图就可以展开图片,并且图片是由所有缩略图拼接而成,图片展开和

jQuery底部带缩略图的焦点图插件

jQuery底部带缩略图的焦点图插件

前面我们已经分享过不少实用的jQuery焦点图插件了,比如这款jQuery可自动播放动画的焦点图插件,非常大气。今天我们要介绍的这款jQuery焦点图插件是带有缩略图的,我们只需点击缩

一款基于jQuery底部带缩略图的焦点图

一款基于jQuery底部带缩略图的焦点图

之前我们已经分享过不少实用的jQuery焦点图插件了,今天我们要介绍的这款jQuery焦点图插件是带有缩略图的,我们只需点击缩略图即可切换至相应的图片,图片切换的时候出现淡入淡出

14款华丽的最新jQuery焦点图动画插件

14款华丽的最新jQuery焦点图动画插件

jQuery焦点图的种类特别烦多,堪称最为丰富的jQuery插件之一。当然jQuery焦点图在网页应用中使用也相当广泛,比如产品展示和活动展示等。本文分享了目前最新的14款jQuer

jQuery带缩略图的宽屏焦点图插件

jQuery带缩略图的宽屏焦点图插件

今天我们要来分享一款很不错的jQuery宽屏焦点图插件,这款焦点图插件相当大气,并且在图片上方列出了所有的缩略图,点击缩略图即可切换相应的图片。另外,我们也可以点击左

jQuery自动裁切图像产生缩略图Fakecrop

jQuery自动裁切图像产生缩略图Fakecrop

在线演示 偶尔,你只想显示一个集合(或更多)的图像具有不同的尺寸,手动创建的每个图像的缩略图的任务相当繁琐,这绝对是不值得,写的一个脚本生成缩略图来支持。jQuery fak

HTML5的音频和JQUERY的全屏幻灯片

在今天的教程中,我们将创建一个全屏的照片幻灯片来说明纽约图片系列。 我们将增加对HTML5的音频元素的声音,为了给生活画廊,并尝试重建这个充满活力的城市环境。 在今天的教

更多 jquery 相关资讯

基于Threejs的jQuery 3d图片旋转木马特效插件

基于Threejs的jQuery 3d图片旋转木马特效插件

这是一款基于ThreeJS的炫酷3D旋转木马图片画廊特效插件。该旋转木马特效可以设置图片预加载,带有前后导航按钮,可以使用鼠标前后旋转,并可以设置3D透视的位置。 查看演示

12个最新免费的jQuery插件周报

12个最新免费的jQuery插件周报

如今,jQuery插件众多,满足各种各样的应用需求。 在这篇文章中,我收集了12款很棒的插件!希望你能从中找到自己需要的插件。 Elastic SVG Sidebar Material Design 弹性SVG侧栏导

jQuery仪表盘指示器动画插件 6种仪表样式

jQuery仪表盘指示器动画插件 6种仪表样式

今天我们要来分享一组很酷的jQuery插件,这款jQuery插件实现了6组不同样式的超酷仪表盘指示器动画。仪表盘的背景是一张图片,通过jQuery来动态生成一些属性标签,比如仪表

2015年4月出炉的 21个免费的 JQuery 前端功能插件

2015年4月出炉的 21个免费的 JQuery 前端功能插件

网页前端开发人员必须关注当下流行的工具,其中jQuery插件会使网页设计变得更快,更好,更容易。今天为大家分享的是20个最好的免费的jQuery插件,这些插件可用于您的项目中,如滑块,导

精心挑选6款优秀的 jQuery Tooltip 插件

精心挑选6款优秀的 jQuery Tooltip 插件

Tooltip(工具提示)是网站中的一个小功能,但却有很重要的作用,常用于显示一些温馨的信息提示和指引。创意的工具提示功能能够加深用户对网站印象,增加网站的用户粘度。 因此,今天这

推荐15款创建漂亮幻灯片的 jQuery 插件

推荐15款创建漂亮幻灯片的 jQuery 插件

对于设计师,开发者,摄影师或任何创造性的个人和企业,他们自己的网站是展示他们的技能和服务的最佳场所。你可能打算设计一个新的个人作品网站,不管你是从头开始或使用模板,都会需

jQuery超炫图片3D背景视觉差特效插件

jQuery超炫图片3D背景视觉差特效插件

这是一款效果非常炫的jQuery图片3D背景视觉差特效插件。该图片视觉差插件使用CSS matrix3d transforms来创建一个3D空间,使你能够使用鼠标和3D空间中的图片做交互,在鼠标移动

Globalize 1.0 发布,jQuery 的国际化插件

jQuery 的国际化和本地话插件 Globalize 发布了 1.0 正式版本,该插件是 jQuery 官方的插件,品质当然是有保证的。 1.0 正式版本的详细介绍请看发行说明。

jQuery炫酷图片3d背景视觉差特效

jQuery炫酷图片3d背景视觉差特效

Smart3D是一款效果非常炫酷的jQuery图片背景视觉差特效插件。该插件将图片以层的形式排放,当鼠标滑过图片的时候,每一层的图片的运动速度各不相同,从而形成强烈的视觉差效果。

jQuery轻量级补间动画工具库-jQueryTween

jQuery轻量级补间动画工具库-jQueryTween

jQueryTween是一款轻量级的jQuery补间动画工具库插件。使用jQueryTween可以制作出各种平滑的动画过渡效果。该插件基于tween.js,旨在简化各种补间动画操作,提供高性能的硬件加