超酷响应式带缩略图的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