图片轮播是网站中的常用功能，用于在有限的网页空间内展示一组产品图片或者照片，同时还有非常吸引人的动画效果。本文向大家推荐12款实用的 [b]jQuery[/b] 图片轮播效果插件，帮助你在你的项目中加入一些效果精美的图片轮播效果，希望这些插件能够帮助到你。 [b]Nivo Slider[/b] 首先推荐的这款插件号称世界上最棒的图片轮播插件，有独立的[b]jQuery[/b] 插件和[b]WordPress[/b] 插件两个版本。 目前下载量已经突破 1,800,000 次！jQuery 独立版本的插件主要有如下特色： ✓  16个独特的过渡效果✓  简洁和有效的标记✓  加载参数设置✓  内置方向和导航控制✓  压缩版本大小只有12KB✓  支持链接图像✓  支持 HTML 标题✓  3套精美光滑的主题✓  在MIT许可下免费使用✓  支持响应式设计 [url=http://nivo.dev7studios.com/][img]http://files.jb51.net/file_images/article/201301/201301080947169.jpg[/img] [/url] [url=http://nivo.dev7studios.com/pricing]插件下载[/url]     [url=http://nivo.dev7studios.com/]效果演示[/url] [b]3D Image Slider[/b] 非常非常酷的 3D 图片滑动效果，有五种绚丽的效果演示。 立体效果是基于[b]CSS3[/b]实现的，请使用最新 Chrome，Firefox 和 Safari 浏览器浏览效果。 对于不支持 CSS3 的浏览器提供了优雅的降级处理，这款插件还有详细的[url=http://tympanus.net/codrops/2011/09/05/slicebox-3d-image-slider/]制作教程[/url]。 [url=http://tympanus.net/Development/Slicebox/][img]http://files.jb51.net/file_images/article/201301/2013010809471610.jpg[/img] [/url] [url=http://tympanus.net/Development/Slicebox/Slicebox.zip]插件下载[/url]     [url=http://tympanus.net/Development/Slicebox/]效果演示[/url] [b]Flexslider[/b] FlexSlider 是一款轻量的响应式 [b]jQuery[/b] 内容滚动插件，能够帮助你在项目轻松的创建漂亮的内容滚动效果。 这款插件也是 2011 年度最佳 [b]jQuery[/b] 插件，今年被 WooThemes 收购并发布了2.0版本，因此继续入选 2012 年度榜单。 [b]主要特色[/b] ✓  简单的，语义化的标签；✓  支持所有主流的浏览器；✓  水平/垂直滑动和淡入淡出动画；✓  支持多个滑块，回调 API，以及更多；✓  触摸滑动支持硬件加速；✓  能够自定义导航选项。✓  兼容最新版本的 jQuery。 [url=http://flex.madebymufffin.com/][img]http://files.jb51.net/file_images/article/201301/2013010809471611.jpg[/img] [/url] [url=https://github.com/woothemes/FlexSlider/zipball/master]插件下载[/url]     [url=http://flexslider.woothemes.com/]效果演示[/url] [b]Elastislide[/b] Elastislide 是一款非常优秀的响应式[b]jQuery[/b] 幻灯片插件，集成了 Touchwipe 插件以支持触屏设备。 [b]提供了四种效果[/b] ✓  水平图片传送带✓  垂直图片传送带✓  固定在屏幕底部✓  缩略图形式预览 这款插件也有详细的[url=http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/]制作教程[/url]，非常详细，可以学习到插件的制作方法。 [url=http://tympanus.net/Development/Elastislide/][img]http://files.jb51.net/file_images/article/201301/2013010809471612.jpg[/img] [/url] [url=http://tympanus.net/Development/Elastislide/Elastislide.zip?84cd58]插件下载[/url]     [url=http://tympanus.net/Development/Elastislide/]效果演示[/url] [b]3D Gallery[/b] 特别推荐！精致的立体图片切换效果，特别适合企业产品展示，可立即用于实际项目中。 支持导航和自动播放功能， 基于[b]CSS3[/b] 实现，推荐使用最新的 Chrome，Firefox 和 Safari 浏览器浏览效果。 [url=http://tympanus.net/Development/3DGallery/][img]http://files.jb51.net/file_images/article/201301/2013010809471613.jpg[/img] [/url] [url=http://tympanus.net/Development/3DGallery/3DGallery.zip]插件下载[/url]     [url=http://tympanus.net/Development/3DGallery/]效果演示[/url] [b]Image Transitions[/b] 基于[b]jQuery[/b] 和[b]CSS3[/b] 动画实现的图片过渡效果。 共有Flip、Rotation、Multi-flip、Cube、Unfold等6种效果。 这款插件有详细的[url=http://tympanus.net/codrops/2011/12/19/experimental-css3-animations-for-image-transitions/]制作教程[/url]可以参考学习。  [url=http://tympanus.net/Development/ImageTransitions/][img]http://files.jb51.net/file_images/article/201301/2013010809471614.jpg[/img] [/url] [url=http://tympanus.net/Development/ImageTransitions/ImageTransitions.zip]插件下载[/url]     [url=http://tympanus.net/Development/ImageTransitions/]效果演示[/url] [b]Slidesjs[/b] Slides 是一个非常简洁的[b]jQuery [/b]图片轮播插件，其特点是自动循环播放、图片预加载以及自动分页功能。 [b]使用示例[/b]  ✓  [url=http://slidesjs.com/examples/images-with-captions/]Images with captions[/url]✓  [url=http://slidesjs.com/examples/linking/]Linking[/url]✓  [url=http://slidesjs.com/examples/product/]Product[/url]✓  [url=http://slidesjs.com/examples/multiple/]Multiple slideshows[/url]✓  [url=http://slidesjs.com/examples/simple/]Simple (unstyled)[/url]✓  [url=http://slidesjs.com/examples/standard/]Standard[/url] [url=http://slidesjs.com/][img]http://files.jb51.net/file_images/article/201301/2013010809471615.jpg[/img] [/url] [url=http://slidesjs.com/downloads/slides.zip]下载插件[/url]     [url=http://slidesjs.com/]效果演示[/url] [b]Galleria[/b] 这是一个响应式的[b]JavaScript[/b] 相册插件，目的是让制作专业相册功能变得更加简单。 Galleria 支持缩略图导航、全屏浏览和自动播放功能，支持 iPhone，iPad Touch 等移动触屏设备。 [url=http://galleria.io/][img]http://files.jb51.net/file_images/article/201301/2013010809471616.jpg[/img] [/url] [url=http://galleria.io/static/galleria-1.2.7.zip]下载插件[/url]     [url=http://galleria.io/]效果演示[/url] [b]AnythingSlider[/b] AnythingSlider 由CSS-Tricks 的Chris Coyier 设计，功能齐全，效果精美，应用十分广泛。 [b]主要特色[/b] ✓  简单的，语义化的标签；✓  水平/垂直滑动和淡入淡出动画；✓  主题可以适用于单个滑块；✓  同一个页面可以显示多个滑动模块；✓  提供了丰富的自定义参数选项。✓  支持所有主流的浏览器； [url=http://css-tricks.com/examples/AnythingSlider/][img]http://files.jb51.net/file_images/article/201301/2013010809471617.jpg[/img] [/url] [url=http://github.com/ProLoser/AnythingSlider/downloads]下载插件[/url]     [url=http://css-tricks.com/examples/AnythingSlider/]效果演示[/url] [b]WOW Slider[/b] 这是另外一款效果精美的响应式图片轮播插件，有众多专业的模板。 提供了 [url=http://wowslider.com/javascript-slideshow-quiet-rotate-demo.html]Rotate[/url],[url=http://wowslider.com/jquery-image-rotator-terse-blur-demo.html]Blur[/url], [url=http://wowslider.com/css-slider-aqua-flip-demo.html]Flip[/url], [url=http://wowslider.com/jquery-slider-mellow-blast-demo.html]Blast[/url], [url=http://wowslider.com/jquery-slider-pinboard-fly-demo.html]Fly[/url], [url=http://wowslider.com/ajax-jquery-slider-pulse-blinds-demo.html]Blinds[/url], [url=http://wowslider.com/automatic-jquery-slider-noir-squares-demo.html]Squares[/url], [url=http://wowslider.com/jquery-slider-flux-slices-demo.html]Slices[/url], [url=http://wowslider.com/jquery-slider-crystal-basic-demo.html]Basic[/url], [url=http://wowslider.com/jquery-slider-noble-fade-demo.html]Fade[/url] 等精美的轮播效果。[url=http://wowslider.com/jquery-slider-bar-kenburns-demo.html] [/url] [url=http://wowslider.com/][img]http://files.jb51.net/file_images/article/201301/2013010809471618.jpg[/img] [/url] [url=http://wowslider.com/wowslider-free-setup.zip]下载插件[/url]     [url=http://wowslider.com/demo.html]效果演示[/url] [b]An HTML5 Slideshow[/b] 基于 HTML5 Canvas 和[b]jQuery[/b] 制作的图片幻灯片效果，有详细的制作教程可以学习。 详细的制作教程和实现思路参考这里，[url=http://tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/]An HTML5 Slideshow With Canvas & jQuery[/url]。 [url=http://tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/][img]http://files.jb51.net/file_images/article/201301/2013010809471619.jpg[/img] [/url] [url=http://demo.tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/html5-slideshow.zip]下载插件[/url]     [url=http://demo.tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/html5-slideshow.html]效果演示[/url] [b]Awkward Showcase[/b] 提供常见的图片轮播效果，可以前后切换，也可以通过页码导航，能够在一页上显示也可以幻灯片形式显示。 [b]效果演示[/b] ✓  [url=http://showcase.awkwardgroup.com/index.html]Normal[/url][url=http://slidesjs.com/examples/images-with-captions/] [/url]✓  [url=http://showcase.awkwardgroup.com/index2.html]Vertical thumnbails[/url][url=http://slidesjs.com/examples/linking/] [/url]✓  [url=http://showcase.awkwardgroup.com/index3html]Horizontal thumbnails[/url][url=http://slidesjs.com/examples/product/] [/url]✓  [url=http://showcase.awkwardgroup.com/index4.html]Dynamic height[/url][url=http://slidesjs.com/examples/multiple/] [/url]✓  [url=http://showcase.awkwardgroup.com/index5.html]Hundred percent[/url][url=http://slidesjs.com/examples/simple/] [/url]✓  [url=http://showcase.awkwardgroup.com/index6html]Viewline[/url][url=http://slidesjs.com/examples/standard/] [/url] [url=http://www.awkwardgroup.com/sandbox/awkward-showcase-a-jquery-plugin/][img]http://files.jb51.net/file_images/article/201301/2013010809471620.jpg[/img] [/url] [url=http://www.awkwardgroup.com/download/?download=showcase.1.1.1]下载插件[/url]     [url=http://showcase.awkwardgroup.com/]效果演示[/url] 作者：山边小溪 出处：http://www.cnblogs.com/lhb25/