12款经典的白富美型—jquery图片轮播插件—前端开发必备


Posted in Javascript onJanuary 08, 2013

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

Nivo Slider

首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本。

目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色:

✓  16个独特的过渡效果✓  简洁和有效的标记✓  加载参数设置✓  内置方向和导航控制✓  压缩版本大小只有12KB✓  支持链接图像✓  支持 HTML 标题✓  3套精美光滑的主题✓  在MIT许可下免费使用✓  支持响应式设计

12款经典的白富美型—jquery图片轮播插件—前端开发必备

插件下载     效果演示

3D Image Slider

非常非常酷的 3D 图片滑动效果,有五种绚丽的效果演示。

立体效果是基于CSS3实现的,请使用最新 Chrome,Firefox 和 Safari 浏览器浏览效果。

对于不支持 CSS3 的浏览器提供了优雅的降级处理,这款插件还有详细的制作教程。

12款经典的白富美型—jquery图片轮播插件—前端开发必备

插件下载     效果演示

Flexslider

FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件,能够帮助你在项目轻松的创建漂亮的内容滚动效果。

这款插件也是 2011 年度最佳 jQuery 插件,今年被 WooThemes 收购并发布了2.0版本,因此继续入选 2012 年度榜单。

主要特色

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

12款经典的白富美型—jquery图片轮播插件—前端开发必备

插件下载     效果演示

Elastislide

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

提供了四种效果

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

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

12款经典的白富美型—jquery图片轮播插件—前端开发必备

插件下载     效果演示

3D Gallery

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

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

12款经典的白富美型—jquery图片轮播插件—前端开发必备

插件下载     效果演示

Image Transitions

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

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

这款插件有详细的制作教程可以参考学习。 

12款经典的白富美型—jquery图片轮播插件—前端开发必备

插件下载     效果演示

Slidesjs

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

使用示例 

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

12款经典的白富美型—jquery图片轮播插件—前端开发必备

下载插件     效果演示

Galleria

这是一个响应式的 JavaScript 相册插件,目的是让制作专业相册功能变得更加简单。

Galleria 支持缩略图导航、全屏浏览和自动播放功能,支持 iPhone,iPad Touch 等移动触屏设备。

12款经典的白富美型—jquery图片轮播插件—前端开发必备

下载插件     效果演示

AnythingSlider

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

主要特色

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

12款经典的白富美型—jquery图片轮播插件—前端开发必备

下载插件     效果演示

WOW Slider

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

提供了 Rotate,Blur, Flip, Blast, Fly, Blinds, Squares, Slices, Basic, Fade 等精美的轮播效果。

12款经典的白富美型—jquery图片轮播插件—前端开发必备

下载插件     效果演示

An HTML5 Slideshow

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

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

12款经典的白富美型—jquery图片轮播插件—前端开发必备

下载插件     效果演示

Awkward Showcase

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

效果演示

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

12款经典的白富美型—jquery图片轮播插件—前端开发必备

下载插件     效果演示

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

Javascript 相关文章推荐
JavaScript中关于indexOf的使用方法与问题小结
Aug 05 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
jquery常用特效方法使用示例
Apr 25 Javascript
js闭包实现按秒计数
Apr 23 Javascript
你不知道的高性能JAVASCRIPT
Jan 18 Javascript
javascript显示上周、上个月日期的处理方法
Feb 03 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
详解基于angular-cli配置代理解决跨域请求问题
Jul 05 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
Jan 05 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
Vue实现简单计算器案例
Feb 25 Javascript
滚动图片效果 jquery实现回旋滚动效果
Jan 08 #Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
Jan 08 #Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 #Javascript
js新闻滚动 js如何实现新闻滚动效果
Jan 07 #Javascript
YUI Compressor压缩JavaScript原理及微优化
Jan 07 #Javascript
onclick与listeners的执行先后问题详细解剖
Jan 07 #Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
Jan 07 #Javascript
You might like
PHPlet在Windows下的安装
2006/10/09 PHP
有关php运算符的知识大全
2011/11/03 PHP
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
基于PHP导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
PHP的引用详解
2015/02/22 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
使javascript也能包含文件
2006/10/26 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
JavaScript实现MIPS乘法模拟的方法
2015/04/17 Javascript
JavaScript中的replace()方法使用详解
2015/06/06 Javascript
JavaScript类型系统之Object详解
2016/01/07 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
2018/09/19 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
Python 命令行参数sys.argv
2008/09/06 Python
python中xrange用法分析
2015/04/15 Python
介绍Python的Django框架中的QuerySets
2015/04/20 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
python+tkinter实现学生管理系统
2019/08/20 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
香港现代设计家具品牌:Ziinlife Furniture
2018/11/13 全球购物
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
Java的五个基础面试题
2016/02/26 面试题
给面试官的感谢信
2014/02/01 职场文书
老公保证书
2015/01/17 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python
Nginx 匹配方式
2022/05/15 Servers