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,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
Apr 15 Javascript
js控制web打印(局部打印)方法整理
May 29 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
Sep 26 Javascript
使用变量动态设置js的属性名
Oct 19 Javascript
jQuery实现精美的多级下拉菜单特效
Mar 14 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 Javascript
Vue中插入HTML代码的方法
Sep 21 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
Jan 19 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正则表达式(regar expression)
2011/09/10 PHP
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
laravel通过a标签从视图向控制器实现传值
2019/10/15 PHP
数理公式,也可以这么唯美
2021/03/10 无线电
js实现上传图片之上传前预览图片
2013/03/25 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
Three.js实现绘制字体模型示例代码
2017/09/26 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
Python中字典的基本知识初步介绍
2015/05/21 Python
Python中的默认参数详解
2015/06/24 Python
python3 实现的人人影视网站自动签到
2016/06/19 Python
python 调用c语言函数的方法
2017/09/29 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
TensorFlow实现自定义Op方式
2020/02/04 Python
Tensorflow 定义变量,函数,数值计算等名字的更新方式
2020/02/10 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
Python模拟登入的N种方式(建议收藏)
2020/05/31 Python
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
Otticanet澳大利亚:最顶尖的世界名牌眼镜, 能得到打折季的价格
2018/08/23 全球购物
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
新闻系毕业生推荐信
2013/11/16 职场文书
违纪检讨书2000字
2014/02/08 职场文书
中秋节国旗下演讲稿
2014/09/13 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
社区重阳节活动总结
2015/03/24 职场文书
独生子女证明范本
2015/06/19 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
Python数据类型最全知识总结
2021/05/31 Python