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 过渡特效、触屏设备、跨浏览器以及响应式布局。

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

• Modern Slide In
• Modern Slide In (with hashTags enabled)
• Sliding Horizontal Parallax
• Apple Style
• Basic Slide
• Basic Crossfade
• Documentation Demo

  插件下载     效果演示

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
  max "",           // 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 图片轮播插件，其特点是自动循环播放、图片预加载以及自动分页功能。

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

• ✓  Images with captions
• ✓  Linking
• ✓  Product
• ✓  Multiple slideshows
• ✓  Simple (unstyled)
• ✓  Standard

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/

三、jQuery Ajax 分页插件和教程

1.Client-side jQuery pagination plugin : jPages

jPages 是一款非常不错的客户端分页插件，有很多特色，例如自动播放、按键翻页、延迟加载等等。

浏览详情  在线演示 

2. jPaginate: A Fancy jQuery Pagination Plugin

jPaginate 是一款非常精致的分页插件，提供了五种形式的DEMO，支持鼠标悬停翻页功能。

浏览详情  在线演示 

3. SimplePager – jQuery paging plugin

SimplePager 是非常简洁的 jQuery 分页插件，用最少的参数配置实现满足需要的分页功能。 

浏览详情  在线演示

 4. jQuery ScrollPagination

jQuery 滚动翻页插件 由 Anderson Ferminiano 开发，可以在项目中免费使用。

浏览详情  在线演示 

5. jqPagination A jQuery pagination plugin

jqPagination 提供了一种新颖的分页方式，用表现当期所处的页码形式取代传统的页码列表模式。

浏览详情  在线演示 

6. Extreme Makeover: jPaginator CSS3 Edition

jPaginator 这款分页插件用于改进长翻页列表的用户体验，使用一个滑动条来快速翻页。

浏览详情  在线演示 

7. Sausage : jQuery infinite Pagination with Demo

Sausage 是一款非常优秀的分页插件，用于实现页面的无限制滚动分页功能。

浏览详情  在线演示 

8. Xarg : Ajax jQuery Pagination

Xarg jQuery 分页插件，有多种分页形式供选择，可以帮助你实现各种需求的分页效果。

浏览详情  在线演示 

9. jPaginator: jQuery Pagination Plugin

jPaginator 是一款非常轻量的 jQuery 分页插件，也非常有特色，提供了方便使用的滑动翻页功能。

浏览详情  在线演示 

10. jQuery Pagination Plugin

这款分页插件虽然效果简洁，但是是学习 jQuery 翻页功能非常好的例子。

浏览详情  在线演示 

11. Sweet Pages: A jQuery Pagination Solution

Sweet Pages 是效果非常精美的一款分页插件，效果有点类似于幻灯片的翻页。

浏览详情  在线演示

 12. AJAX Pagination using jQuery and PHP with Animation

最后推荐的这款 jQuery 分页插件拥有充满吸引力的动画效果，相信你会喜欢的。

浏览详情  在线演示