图片轮播是网站中的常用功能，用于在有限的网页空间内展示一组产品图片或者照片，同时还有非常吸引人的动画效果。本文向大家推荐12款实用的 jQuery 图片轮播效果插件，帮助你在你的项目中加入一些效果精美的图片轮播效果，希望这些插件能够帮助到你。
Nivo Slider
首先推荐的这款插件号称世界上最棒的图片轮播插件，有独立的 jQuery 插件和 WordPress 插件两个版本。
目前下载量已经突破 1,800,000 次！jQuery 独立版本的插件主要有如下特色：
- ✓ 16个独特的过渡效果
- ✓ 简洁和有效的标记
- ✓ 加载参数设置
- ✓ 内置方向和导航控制
- ✓ 压缩版本大小只有12KB
- ✓ 支持链接图像
- ✓ 支持 HTML 标题
- ✓ 3套精美光滑的主题
- ✓ 在MIT许可下免费使用
- ✓ 支持响应式设计
插件下载 效果演示
3D Image Slider
非常非常酷的 3D 图片滑动效果，有五种绚丽的效果演示。
立体效果是基于 CSS3 实现的，请使用最新 Chrome，Firefox 和 Safari 浏览器浏览效果。
对于不支持 CSS3 的浏览器提供了优雅的降级处理，这款插件还有详细的制作教程。
插件下载 效果演示
Flexslider
FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件，能够帮助你在项目轻松的创建漂亮的内容滚动效果。
这款插件也是 2011 年度最佳 jQuery 插件，今年被 WooThemes 收购并发布了2.0版本，因此继续入选 2012 年度榜单。
主要特色
- ✓ 简单的，语义化的标签；
- ✓ 支持所有主流的浏览器；
- ✓ 水平/垂直滑动和淡入淡出动画；
- ✓ 支持多个滑块，回调 API，以及更多；
- ✓ 触摸滑动支持硬件加速；
- ✓ 能够自定义导航选项。
- ✓ 兼容最新版本的 jQuery。
插件下载 效果演示
Elastislide
Elastislide 是一款非常优秀的响应式 jQuery 幻灯片插件，集成了 Touchwipe 插件以支持触屏设备。
提供了四种效果
- ✓ 水平图片传送带
- ✓ 垂直图片传送带
- ✓ 固定在屏幕底部
- ✓ 缩略图形式预览
这款插件也有详细的制作教程，非常详细，可以学习到插件的制作方法。
插件下载 效果演示
3D Gallery
特别推荐！精致的立体图片切换效果，特别适合企业产品展示，可立即用于实际项目中。
支持导航和自动播放功能， 基于 CSS3 实现，推荐使用最新的 Chrome，Firefox 和 Safari 浏览器浏览效果。
插件下载 效果演示
Image Transitions
基于 jQuery 和 CSS3 动画实现的图片过渡效果。
共有Flip、Rotation、Multi-flip、Cube、Unfold等6种效果。
这款插件有详细的制作教程可以参考学习。
插件下载 效果演示
Slidesjs
Slides 是一个非常简洁的 jQuery 图片轮播插件，其特点是自动循环播放、图片预加载以及自动分页功能。
使用示例
- ✓ Images with captions
- ✓ Linking
- ✓ Product
- ✓ Multiple slideshows
- ✓ Simple (unstyled)
- ✓ Standard
下载插件 效果演示
Galleria
这是一个响应式的 JavaScript 相册插件，目的是让制作专业相册功能变得更加简单。
Galleria 支持缩略图导航、全屏浏览和自动播放功能，支持 iPhone，iPad Touch 等移动触屏设备。
一.问题：
ExtJS4使用border布局，左边为accordion布局的功能导航菜单，发现当导航菜单面板收缩展开时，右边选项卡面板(TabPanel)中的grid等面板宽度并没有自动变化。
二.解决方案：
1.在新增选项卡中配置一个自定义属性sidebarChange，默认值为false,用于保存左边导航菜单是否发生展开收缩动作。
2.在新增的选项卡中添加activate监听事件，当选项卡被激活且sidebarChange属性值为true时，则通过tab.loader.load()重新加载选项卡内容。
3.在左边功能导航面板中配置相应的展开和收缩事件的监听。及相应的处理方法。
这样，当左边功能导航面板收缩或展开时，当前的选项卡会重新加载。
4.至此，当左边导航面板收缩或展开时，就解决了gridpanel宽度不跟着自动变化问题。
本文链接
一、jQuery.buildFragment使用方法
1、参数
2、返回值
二、思路分析
1、处理context参数
根据传入到context参数值的不同，确保context为文档根节点document
2、限制可缓存条件
2.1、字符串小于512字节
2.2、字符串不存在option标签(克隆option标签会丢失选中状态,因此不缓存)
2.3、字符串不存在<object>,<embed>标签(IE 6不能把<object>,<embed>标签嵌入到文档碎片中)
2.4、字符串不存在checked属性(只针对克隆拥有checked属性节点时丢失选中状态的浏览器，如：Safria）
2.5、字符串中不存在html5标签(只针对不支持html5标签的浏览器)
3、处理args数组
通过jQuery.clean函数格式化处理数组项字符串，并生成dom节点添加到文档碎片中
4、判断缓存值
如果缓存值为由clean函数处理的文档碎片，则数组项字符串略过clean函数处理
5、返回值
函数返回一个对象，保存文档碎片和可缓存状态
三、源码注释分析
2 rchecked = /checked\s*(?:[^=]|=\s*.checked.)/i,
3 rnoshimcache = new RegExp("<(?:" + nodeNames + ")[\\s/>]", "i");
4
5 jQuery.fragments = {};
6
7
8 jQuery.buildFragment = function( args, context, scripts ) {
9 var fragment, cacheable, cachehit,
10 first = args[ 0 ];
11
12 // Set context from what may come in as undefined or a jQuery collection or a node
13 // Updated to fix #12266 where accessing context[0] could throw an exception in IE9/10 &
14 // also doubles as fix for #8950 where plain objects caused createDocumentFragment exception
15
16 // 根据参数context值的不同,确保context为文档根节点document
17 // jQuery1.8.0版本以后代码相对于之前版本有很大改进,以下是改进地方:
18 // 针对context参数值为undefined, jQuery对象,DOM元素节点情况改进代码
19 // 解决了1.8.0版本中context参数为文档片段(#document-fragment)的bug
20
21 context = context || document;
22 context = !context.nodeType && context[0] || context;
23 context = context.ownerDocument || context;
24
25
26 // Only cache "small" (1/2 KB) HTML strings that are associated with the main document
27 // Cloning options loses the selected state, so don't cache them
28 // IE 6 doesn't like it when you put <object> or <embed> elements in a fragment
29 // Also, WebKit does not clone 'checked' attributes on cloneNode, so don't cache
30 // Lastly, IE6,7,8 will not correctly reuse cached fragments that were created from unknown elems #10501
31
32 // html字符串小于512字节
33 // 克隆option标签会丢失选中状态,因此不缓存
34 // IE 6不能把<object>,<embed>标签嵌入到文档碎片中
35 // WebKit浏览器(如：Safria)克隆拥有checked属性节点时,也会丢失选中状态,因此不缓存,google最新版本不存在该bug
36 // 最后,IE6,7、8不会正确地重用由html5标签元素创建的缓存片段
37
38 if ( args.length === 1 && typeof first === "string" && first.length < 512 && context === document &&
39 first.charAt(0) === "<" && !rnocache.test( first ) &&
40
41 // 如果浏览器能够克隆checked属性和支持html5,或者html字符串中不存在checked和html5标签元素
42 (jQuery.support.checkClone || !rchecked.test( first )) &&
43 (jQuery.support.html5Clone || !rnoshimcache.test( first )) ) {
44
45 // Mark cacheable and look for a hit
46 // 如果以上条件都满足，则打上可缓存标记
47 cacheable = true;
48
49 // 将数组项字符串(主要是html字符串)缓存到jQuery.fragment对象的属性列表中，并获取缓存值
50 // 如果clean函数已经处理过了第二次相同的字符串内容，缓存值则为clean函数处理的文档碎片，字符串解析可以略过clean处理
51 fragment = jQuery.fragments[ first ];
52
53 // 在clean函数处理了第一次字符串(与第二次相同)后，cachehit为true
54