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

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

• 响应式设计
• 支持桌面和移动手机设备
• 轻量级，压缩后只有4kb
• 可以通过CSS来自定义轮播图的样式

使用方法

该轮播图插件依赖于jQuery（1.0以上版本）或Zepto（1.0以上版本）。使用前要移入这些依赖文件。

<link rel="stylesheet" href="/path/to/pgwslideshow.css">
<script src="jquery/1.11.0/jquery.min.js"></script>
<script src="/path/to/pgwslideshow.js"></script>                
              

HTML结构

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

<ul class="pgwSlideshow">
    <li><img src="img/1.jpg" alt="..." data-description="..."></li>
    <li><img src="img/thumb.jpg" alt="" data-large-src="img/big-img.jpg"></li>
    <li>
        <a href="#" target="_blank">
            <img src="img/3.jpg" alt="...">
        </a>
    </li>
    ......
</ul>                
              

• alt：这个属性定义图片的标题，它会在图片显示的时候作为标题显示。
• data-description：该属性会在图片标题下方添加一行新的文本，用于额外的描述信息。
• data-large-src：如果你希望缩略图使用小尺寸的图片，显示的是大尺寸的图片，就可以使用data-large-src属性来指定大尺寸图片的URL。

另外，如果你希望某张图片链接到特定的URL，可以使用<a>标签来包裹图片，每张图片都可以单独设置它的对应链接地址。

调用插件

$(document).ready(function() {
        $('.pgwSlideshow').pgwSlideshow();
    });           
              

配置参数

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

方法

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

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

var pgwSlideshow = $('.pgwSlideshow').pgwSlideshow();         
              

• startSlide ：轮播图开始播放。

  pgwSlideshow.startSlide();  
  

• stopSlide ：停止轮播图的播放。

  pgwSlideshow.stopSlide();  
  

• getCurrentSlide ：返回当前轮播图片的序号。

  pgwSlideshow.getCurrentSlide();  
  

• getSlideCount ：返回轮播图中图片的总数。

  pgwSlideshow.getSlideCount(); 
  

• displaySlide ：通过参数中的数值来显示指定序号的轮播图图片。

  pgwSlideshow.displaySlide(3);
  

• nextSlide ：显示下一幅图片。

  pgwSlideshow.nextSlide();
  

• previousSlide ：显示前一幅图片。

  pgwSlideshow.previousSlide();
  

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

  pgwSlideshow.destroy();
  

• reload ：使用新的配置参数来重新加载轮播图插件。

  pgwSlideshow.reload({
      transitionEffect : 'fading',
      adaptiveDuration : 4000
  });