Web 开发最有用的 jQuery 插件集锦

一、Responsive SlideShow——图片滑块展示

1、Responsive Carousel

responsive-carousel 是一个内容传送带插件，支持鼠标、触摸和键盘操作。默认包含 slide/drag 过渡特效，你也通过 data 属性应用以及包含额外的 CSS 样式。

在源文件夹里还包含其它的扩展，例如翻转和淡入淡出的过渡效果，自动播放，分页等等。使用示例：

<script src="jquery.js"></script>
<script src="dist/responsive-carousel.min.js"></script>
<link href="src/responsive-carousel.css" rel="stylesheet">
<link href="src/responsive-carousel.slide.css" rel="stylesheet">

<div class="carousel" data-transition="slide">
    <div>
        <!-- carousel item content here -->
    </div>
    <div>
        <!-- carousel item content here -->
    </div>
</div>

插件下载效果演示

2、Sequence.js

这是一款动画效果很抢眼的响应式内容滑动插件，主要特色：使用 CSS3 过渡特效、触屏设备、跨浏览器以及响应式布局。

本身无内置的主题，可以根据需要完全自定义。主题示例：

插件下载效果演示

3、Fresco

Fresco 是一款响应式的灯箱插件，它可以被用来创建令人惊叹的遮罩效果。它配备了全屏播放，支持视网膜显示的主题以及强大的 JavaScript API。

插件下载效果演示

4、BookBlock: A Content Flip Plugin

BookBlock 这款插件可用于创建精美的小册子风格效果，支持“翻页”模式的导航，可以用于显示任何内容，如图像、文本和视频等待。

<div id="bb-bookblock" class="bb-bookblock">
    <div class="bb-item"><!-- custom content --></div>
    <div class="bb-item"><!-- ... --></div>
    <div class="bb-item"><!-- ... --></div>
    <div class="bb-item">
        <!-- ... -->
    </div>
</div>
$(function() {             
    $( '#bb-bookblock' ).bookblock(); 
});

插件下载效果演示

5、RSlider

RSlider 是一个全屏的响应式图像和内容滑块，外观设计简洁大方，会根据浏览器的窗口宽度自动调整尺寸。

插件下载效果演示（温馨提示：需要FQ访问）

6、ResponsiveSlides.js

压轴的 ResponsiveSlides.js 是一款轻量的 jQuery 插件，用于创建响应的幻灯片。支持下列参数：

$(".rslides").responsiveSlides({
  auto: true,             // Boolean: Animate automatically, true or false，//布尔类型：是否手动切换图片(“auto:false”会自动添加页面标签)
  speed: 500,            // Integer: Speed of the transition, in milliseconds， //整数：幻灯片切换间隔时间，单位是ms 
  timeout: 4000,          // Integer: Time between slide transitions, in milliseconds
  pager: false,           // Boolean: Show pager, true or false
  nav: false,             // Boolean: Show navigation, true or false
  random: false,          // Boolean: Randomize the order of the slides, true or false
  pause: false,           // Boolean: Pause on hover, true or false
  pauseControls: true,    // Boolean: Pause when hovering controls, true or false
  prevText: "Previous",   // String: Text for the "previous" button
  nextText: "Next",       // String: Text for the "next" button
  maxwidth: "",           // Integer: Max-width of the slideshow, in pixels，//整数：幻灯片和图片区域的最大宽度，单位是像素px
  navContainer: "",       // Selector: Where controls should be appended to, default is after the 'ul'
  manualControls: "",     // Selector: Declare custom pager navigation
  namespace: "rslides",   // String: Change the default namespace used，//字符串：修改幻灯片类和id的默认命名空间(比如你想在一个页面添加多个幻灯片时使用)
  before: function(){},   // Function: Before callback
  after: function(){}     // Function: After callback
});

插件下载效果演示

二、网页布局

1、Wookmark

Wookmark 这款 jQuery 插件用于创建一个动态的多列布局。使用示例：

$('#myContent li').wookmark({offset: 2});

　插件下载效果演示

2、jQuery Scroll Path

jQuery Scroll Path 是一款非常帮的自定义路径滚动插件。使用示例：

$.fn.scrollPath("getPath")
        // Move to 'start' element
        .moveTo(400, 50, {name: "start"})
        // Line to 'description' element
        .lineTo(400, 800, {name: "description"})
        // Arc down and line to 'syntax'
        .arc(200, 1200, 400, -Math.PI/2, Math.PI/2, true)
        .lineTo(600, 1600, {
            callback: function() {
                highlight($(".settings"));
            },
            name: "syntax"
        })
        // Arc and rotate back to the beginning.
        .arc(1300, 50, 900, -Math.PI/2, -Math.PI, true, {rotate: Math.PI*2, name: "end"});
 
    // We're done with the path, let's initate the plugin on our wrapper element
    $(".wrapper").scrollPath({drawPath: true, wrapAround: true});

　插件下载效果演示

3、Flexslider

FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件，能够帮助你在项目轻松的创建漂亮的内容滚动效果。这款插件也是 2011 年度最佳 jQuery 插件，今年被 WooThemes 收购并发布了2.0版本，因此继续入选 2012 年度榜单。

主要特色

✓ 简单的，语义化的标签；
✓ 支持所有主流的浏览器；
✓ 水平/垂直滑动和淡入淡出动画；
✓ 支持多个滑块，回调 API，以及更多；
✓ 触摸滑动支持硬件加速；
✓ 能够自定义导航选项。
✓ 兼容最新版本的 jQuery。

插件下载效果演示

4、Elastislide

Elastislide 是一款非常优秀的响应式 jQuery 幻灯片插件，集成了 Touchwipe 插件以支持触屏设备。

提供了四种效果

✓ 水平图片传送带
✓ 垂直图片传送带
✓ 固定在屏幕底部
✓ 缩略图形式预览

这款插件也有详细的制作教程，非常详细，可以学习到插件的制作方法。

插件下载效果演示

5、Slidesjs--responsive

Slides 是一个非常简洁的 jQuery 图片轮播插件，其特点是自动循环播放、图片预加载以及自动分页功能。

使用示例下载插件效果演示

6. Responsive Thumbnail Gallery Plugin

这是一款带缩略图功能的幻灯片插件，能够根据父容器的尺寸自适应大小，效果不错。

7、3D Gallery

特别推荐！精致的立体图片切换效果，特别适合企业产品展示，可立即用于实际项目中。

支持导航和自动播放功能，基于 CSS3 实现，推荐使用最新的 Chrome，Firefox 和 Safari 浏览器浏览效果

插件下载效果演示

8、Image Transitions

基于 jQuery 和 CSS3 动画实现的图片过渡效果。

共有Flip、Rotation、Multi-flip、Cube、Unfold等6种效果。

这款插件有详细的制作教程可以参考学习。插件下载效果演示

9、Zoomooz.js

Zoomooz.js 是一款易于使用的插件，能使任何网页元素放大，支持 3D 转换。使用示例：

$(document).ready(function() {
    $("#element").click(function(evt) {
        $(this).zoomTo({targetsize:0.75, duration:600});
        evt.stopPropagation();
    });
});

　　插件下载效果演示

学习： http://tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/