图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果。本文向大家推荐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

基于 jQueryCSS3 动画实现的图片过渡效果。

共有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 等移动触屏设备。

下载插件     效果演示

AnythingSlider

AnythingSlider 由CSS-Tricks 的Chris Coyier 设计,功能齐全,效果精美,应用十分广泛。

主要特色

✓  简单的,语义化的标签;✓  水平/垂直滑动和淡入淡出动画;✓  主题可以适用于单个滑块;✓  同一个页面可以显示多个滑动模块;✓  提供了丰富的自定义参数选项。✓  支持所有主流的浏览器;

下载插件     效果演示

WOW Slider

这是另外一款效果精美的响应式图片轮播插件,有众多专业的模板。

提供了 Rotate,BlurFlipBlastFlyBlindsSquaresSlicesBasicFade 等精美的轮播效果。

下载插件     效果演示

An HTML5 Slideshow

基于 HTML5 Canvas 和 jQuery 制作的图片幻灯片效果,有详细的制作教程可以学习。

详细的制作教程和实现思路参考这里,An HTML5 Slideshow With Canvas & jQuery

下载插件     效果演示

Awkward Showcase

提供常见的图片轮播效果,可以前后切换,也可以通过页码导航,能够在一页上显示也可以幻灯片形式显示。

效果演示

✓  Normal✓  Vertical thumnbails✓  Horizontal thumbnails✓  Dynamic height✓  Hundred percent✓  Viewline

下载插件     效果演示

作者:山边小溪
出处:http://www.cnblogs.com/lhb25/

12款经典的白富美型—jquery图片轮播插件—前端开发必备的更多相关文章

  1. Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

    Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...

  2. 面板支持单个,多个元素的jQuery图片轮播插件

    一.先附上demo <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  3. jquery图片轮播插件slideBox

    效果预览: 源代码下载: jQuery图片轮播(焦点图)插件jquery.slideBox 特点:兼容IE6+,Chrome,Firefox,Opera,safari,可左右,可上下,可快可慢,可指定 ...

  4. jquery图片轮播-插件

    更新内容: 1. 页面结构和css样式必定类似下边放置 2. 点击左右按钮,实现左右滑动. 3. 这一般用于多个图片轮播使用,简化并优化代码. 若因不同需求,均可自行将插件scrollimgplus. ...

  5. Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  6. 【精心推荐】12款很好用的 jQuery 图片滚动插件

    这里收集了12款很好用的 jQuery 图片滚动插件分享给大家.jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各 ...

  7. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  8. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  9. JQuery插件之图片轮播插件–slideBox

    来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...

随机推荐

  1. 推荐15款最佳的 jQuery 分步引导插件

    当用户浏览到一个网站,它可能从不知道如何浏览,如何操作网站或 Web 应用程序的内容和流程.在这篇文章中,我们编制了一些最好的 jQuery 引导插件列表.你会发现这些插件对于提高你的网站的整体用户体 ...

  2. highCharts提示框不显示的问题

    使用HighCharts插件进行数据展示的时候,鼠标放在数据处没有提示框,或者只有头尾2个提示框,其他提示框不显示,为什么会这样? 1.查看是否使用了tooltip属性,该属性的enabled默认为t ...

  3. Sharepoint学习笔记—ECM系列--文档集(Document Set)的实现

    文档集是 SharePoint Server 2010 中的一项新功能,它使组织能够管理单个可交付文档或工作产品(可包含多个文档或文件).文档集是特殊类型的文件夹,它合并了唯一的文档集属性以及文件夹和 ...

  4. ButterKnife基本使用

    ButterKnife基本使用 Butter Knife处理字段和方法绑定.   重要更新: 目前(2016.4.29), ButterKnife的最新版本是8.0.1. Demo项目已更新: htt ...

  5. RSA算法及其在iOS中的使用

    因为项目中需要传输用户密码,为了安全需要用RSA加密,所以就学习了下RSA加密在iOS中的应用. 关于RSA的历史及原理,下面的两篇文章讲的很清楚了:  http://www.ruanyifeng.c ...

  6. C#中的泛型

    写在前面:好几个月没更新了,这些天换了份工作,原来的公司出了很多事所以辞职了.这篇文章写的超级好,让我终于明白了困扰在我心里好久的C#泛型的概念,不仅收藏了,还手动转发一下 哈哈哈~ 1.1 C#中的 ...

  7. Linux0.11内核--内存管理之2.配合fork

    [版权所有,转载请注明出处.出处:http://www.cnblogs.com/joey-hua/p/5598451.html ] 在上一篇的fork函数中,首先一上来就调用get_free_page ...

  8. iOS程序破解——class-dump获取头文件

    原文在此:http://www.cnblogs.com/mddblog/p/4942894.html 一.简述 class-dump顾名思义,是用来dump目标对象class信息的工具.它根据oc的r ...

  9. popupwindow展示

    样式: layout: popup_appinfo.xml <?xml version="1.0" encoding="utf-8"?> <L ...

  10. centos为用户增加ssh key

    linux增加用户,为用户增加key 可以用  ssh-keygen -t rsa 添加ssh的key,会得到public_key和自己的private_key 然后这个key可以用在任何用户上 ad ...