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 相关文章推荐
广泛收集的jQuery拖放插件集合
Apr 09 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
获取中文字符串的实际长度代码
Jun 05 Javascript
技术男用来对妹子表白的百度首页
Jul 23 Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
原生js实现瀑布流布局
Mar 08 Javascript
node.js爬虫爬取拉勾网职位信息
Mar 14 Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 Javascript
VueJs组件之父子通讯的方式
May 06 Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
Apr 14 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
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
php实现快速排序的三种方法分享
2014/03/12 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
Openlayers实现地图全屏显示
2020/09/28 Javascript
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
python中cPickle用法例子分享
2014/01/03 Python
python实现用户管理系统
2018/01/10 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
python3 求约数的实例
2019/12/05 Python
python关闭占用端口方式
2019/12/17 Python
tensorflow之自定义神经网络层实例
2020/02/07 Python
pyqt5 QlistView列表显示的实现示例
2020/03/24 Python
Python无损压缩图片的示例代码
2020/08/06 Python
html5定位并在百度地图上显示的示例
2014/04/27 HTML / CSS
美国浴缸、水槽和水龙头购物网站:Vintage Tub & Bath
2019/11/05 全球购物
什么时候需要进行强制类型转换
2016/09/03 面试题
空乘英文求职信
2014/04/13 职场文书
《猴子种果树》教学反思
2014/04/26 职场文书
单位法人授权委托书范本
2014/10/09 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
乒乓球比赛通知
2015/04/27 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
Python利用FlashText算法实现替换字符串
2022/03/31 Python