Web 开发最有用的50款 jQuery 插件集锦——《内容滑块篇》
http://www.cnblogs.com/lhb25/archive/2013/04/02/50-jquery-plugins-d.html
responsive-carousel 是一个内容传送带插件,支持鼠标、触摸和键盘操作。默认包含 slide/drag 过渡特效,你也通过 data 属性应用以及包含额外的 CSS 样式。
在源文件夹里还包含其它的扩展,例如翻转和淡入淡出的过渡效果,自动播放,分页等等。使用示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<script src= "jquery.js" ></script> <script src= "dist/responsive-carousel.min.js" ></script> <link href= "src/responsive-carousel.css" rel= "stylesheet" > <link href= "src/responsive-carousel.slide.css" rel= "stylesheet" > <div class = "carousel" data-transition= "slide" > <div> <!-- carousel item content here --> </div> <div> <!-- carousel item content here --> </div> </div> |
iosSlider
iosSlider 是一款响应式的,支持触屏操作的,跨浏览器的 jQuery 插件,它可以用来作为一个内容滑块,旋转木马,滚动的网站横幅或一个图片库。
调用方式:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
$(document).ready( function () { /* basic - default settings */ $( '.iosSlider' ).iosSlider(); /* some custom settings */ $( '.iosSlider' ).iosSlider({ snapToChildren: true , scrollbar: true , scrollbarHide: false , desktopClickDrag: true , scrollbarLocation: 'bottom' , scrollbarHeight: '6px' , scrollbarBackground: 'url(_img/some-img.png) repeat 0 0' , scrollbarBorder: '1px solid #000' , scrollbarMargin: '0 30px 16px 30px' , scrollbarOpacity: '0.75' , onSlideChange: changeSlideIdentifier }); }); |
Sequence.js
这是一款动画效果很抢眼的响应式内容滑动插件,主要特色:使用 CSS3 过渡特效、触屏设备、跨浏览器以及响应式布局。
本身无内置的主题,可以根据需要完全自定义。主题示例:
- Modern Slide In
- Modern Slide In (with hashTags enabled)
- Sliding Horizontal Parallax
- Apple Style
- Basic Slide
- Basic Crossfade
- Documentation Demo
Fresco
Fresco 是一款响应式的灯箱插件,它可以被用来创建令人惊叹的遮罩效果。它配备了全屏播放,支持视网膜显示的主题以及强大的 JavaScript API。
BookBlock: A Content Flip Plugin
BookBlock 这款插件可用于创建精美的小册子风格效果,支持“翻页”模式的导航,可以用于显示任何内容,如图像、文本和视频等待。
使用示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<div id= "bb-bookblock" class = "bb-bookblock" > <div class = "bb-item" > <!-- custom content --> </div> <div class = "bb-item" > <!-- ... --> </div> <div class = "bb-item" > <!-- ... --> </div> <div class = "bb-item" > <!-- ... --> </div> <!-- ... --> </div> $( function () { $( '#bb-bookblock' ).bookblock(); }); |
Adaptor
Adaptor 是一个轻量级的内容滑块,提供了简单的接口来创建很酷的 2D 或 3D 的幻灯片动画效果。
不支持 3D 的浏览器将优雅降级到简单的淡入淡出过渡动画。使用方法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<div class = "slider-viewport" ><!-- works as a viewport for the 3D transitions --> <div id= "content-box" ><!-- the 3d box --> <figure><!-- slide --> <img src= "img/slide-1.png" > <figcaption>This is slide one 's description</figcaption> </figure> <figure> <img src="img/slide-2.png"> <figcaption>This is slide two' s description</figcaption> </figure> <figure> <img src= "img/slide-3.png" > <figcaption>This is slide three 's description</figcaption> </figure> <figure class="slide"> <img src="img/slide-4.png"> <figcaption>This is slide four' s description</figcaption> </figure> </div> </div> <script> $( function (){ $( '#content-box' ).boxSlider( /* options */ ); }); </script> |
rcarousel
rcarousel 是基于 jQuery UI 的连续传送带效果插件,包含一些很酷的特性,支持高度定制和 IE6 等古老的浏览器。
使用示例:
1
2
3
4
5
6
7
8
9
10
11
12
|
<div id= "carousel" > <img src= "flowers/tulip.jpg" alt= "a tulip" /> <img src= "flowers/rose.jpg" alt= "a rose" /> <img src= "flowers/daisy.jpg" alt= "a daisy" /> <img src= "flowers/sunflower.jpg" alt= "a sunflower" /> <img src= "flowers/pansy.jpg" alt= "a pansy" /> </div> <script type= "text/javascript" > jQuery( function ($) { $( "#carousel" ).rcarousel( {width: 200, height: 200} ); }); </script> |
Rhinoslider
Rhinoslider 是一个灵活的多重效果滑块/幻灯片,它可以用来作为简单的幻灯片演示,或作为一个效果丰富的 jQuery 滑块。
官方还提供了一个方便的效果定制工具,可以配置你想要的效果,然后生成下载源码。
RSlider
RSlider 是一个全屏的响应式图像和内容滑块,外观设计简洁大方,会根据浏览器的窗口宽度自动调整尺寸。
µslider
μslider是一个 jQuery 内容滑块插件,易于使用,只有一些基本的配置选项。
ResponsiveSlides.js
压轴的 ResponsiveSlides.js 是一款轻量的 jQuery 插件,用于创建响应的幻灯片。支持下列参数:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
$( ".rslides" ).responsiveSlides({ auto: true , // Boolean: Animate automatically, true or false speed: 500, // Integer: Speed of the transition, in milliseconds timeout: 4000, // Integer: Time between slide transitions, in milliseconds pager: false , // Boolean: Show pager, true or false nav: false , // Boolean: Show navigation, true or false random: false , // Boolean: Randomize the order of the slides, true or false pause: false , // Boolean: Pause on hover, true or false pauseControls: true , // Boolean: Pause when hovering controls, true or false prevText: "Previous" , // String: Text for the "previous" button nextText: "Next" , // String: Text for the "next" button maxwidth: "" , // Integer: Max-width of the slideshow, in pixels navContainer: "" , // Selector: Where controls should be appended to, default is after the 'ul' manualControls: "" , // Selector: Declare custom pager navigation namespace: "rslides" , // String: Change the default namespace used before: function (){}, // Function: Before callback after: function (){} // Function: After callback }); |
兼容的浏览器:
- Internet Explorer 6,7,8,9
- Firefox 3,6,8,11
- Safari 5,5.1
- Chrome 15,20
- Opera 11,11.6
- iOS Safari
- Symbian 3 Webkit
- Opera Mobile 10.1
- Opera Mini for iOS
- IE7, IE9 Mobile
- Firefox Mobile
- Android 2.3+
- Kindle browser
Web 开发最有用的50款 jQuery 插件集锦——《内容滑块篇》的更多相关文章
- Web 开发最有用的50款 jQuery 插件集锦——《综合篇》
这篇文章是<Web 开发最有用的50款 jQuery 插件集锦>系列的最后一篇,整个系列向大家分享了在网站开发中非常有帮助的 50 款 jQuery 插件,这些插件按用途主要有以下类别:网 ...
- Web 开发最有用的50款 jQuery 插件集锦——《图片特效篇》
<Web 开发最有用的50款 jQuery 插件集锦>系列文章向大家分享最具创新的50款 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插 ...
- 对于 Web 开发很有用的 jQuery 效果制作教程
如果你的项目中需要响应式滑块,炫丽的图片呈现,对话框提示,轻巧动画等效果,jQuery 是完美的解决方案.凭借这个快速,易用的 JavaScript 库,可以轻松处理语言之间的交互,它给人最快速的 W ...
- Web 开发人员必备的12款 Chrome 扩展程序
之前已经分享过一些帮助 Web 开发人员和设计师的 Chrome 扩展,这次我们继续展示一组很有用的 Chrome 应用程序.这些免费的 Chrome 应用程序可以简化您的工作流程,为了加快您的工作流 ...
- 值得 Web 开发人员学习的20个 jQuery 实例教程
这篇文章挑选了20个优秀的 jQuery 实例教程,这些 jQuery 教程将帮助你把你的网站提升到一个更高的水平.其中,既有网站中常用功能的的解决方案,也有极具吸引力的亮点功能的实现方法,相信通过对 ...
- 2016年4月最佳的20款 jQuery 插件推荐
这个列表包括20个我们觉得是最有用的免费的 jQuery 插件,它们都是最具创新性和最省时省力的解决方案,很多都是现代化的设计和开发中碰到的问题的处理方案.如果你熟悉下面列出的任何插件,请与我们的读者 ...
- 网站开发中很实用的 HTML5 & jQuery 插件
这篇文章挑选了15款在网站开发中很实用的 HTML5 & jQuery 插件,如果你正在寻找能优化网站,使其更具创造力和视觉冲击,那么本文正是你需要的.这些优秀的 jQuery 插件能为你的网 ...
- 推荐超实用的8款jQuery插件
这里有8款超实用的jQuery插件供大家参考使用,除了jQuery特效的详细使用方法以外,我们还有在线演示和下载及教程,希望对大家有所帮助! 超棒的视差效果jQuery插件 - FractionSli ...
- ASP.NET中使用jQuery插件实现图片幻灯效果
参照网上的资料及提供的jQuery插件实现图片幻灯效果. 1.页面前台代码: //头部引用 <head runat="server"><title>< ...
随机推荐
- canvas手机端绘图解决方案
解决方案js:https://pan.baidu.com/s/1jIys2aU 我们使用canvas通常会遇到一个问题就是坐标系的问题,如果按象限来说,一般canvas是在第四象限,但是我们通常都喜欢 ...
- js时间字符串转为标准时间
//将字符串转换为时间格式,适用各种浏览器,格式如2016-09-09T17:02:37.227"function GetTimeByTimeStr(dateString) { var ti ...
- Entertainment Box(可多执行的区间问题)
本题出自: Nordic Collegiate Programming Contest 2015 Ada, Bertrand and Charles often argue over which T ...
- mac终端下连接阿里云服务器
通过ssh连接 ssh 用户名@地址 ssh root@xx.xxx.xxx.xx https://www.jianshu.com/p/f034817a7837 最后还是通过 FileZilla 连 ...
- Spring + Mybatis项目实现数据库读写分离
主要思路:通过实现AbstractRoutingDataSource类来动态管理数据源,利用面向切面思维,每一次进入service方法前,选择数据源. 1.首先pom.xml中添加aspect依赖 & ...
- tomcat压缩版配置
下载Jdk并安装 配置Java环境变量 因为需要用services.bat安装,services.bat中 rem Make sure prerequisite environment variabl ...
- [洛谷 P3239] [HNOI2015]亚瑟王
[HNOI2015]亚瑟王 题目描述 小 K 不慎被 LL 邪教洗脑了,洗脑程度深到他甚至想要从亚瑟王邪教中脱坑.他决定,在脱坑之前,最后再来打一盘亚瑟王.既然是最后一战,就一定要打得漂亮.众所周知, ...
- 使用AJAX报406错误
使用AJAX报406错误,基本有一下两种情况: (1)90%的可能是没有添加jackson包: (2)10%的可能是请求的url后缀是*.html 在springmvc里面,如果请求的是*.html, ...
- ConcurrentHashMap1.8源码解析
深入并发包 ConcurrentHashMap 概述 JDK1.8的实现已经摒弃了Segment的概念,而是直接用Node数组+链表+红黑树的数据结构来实现,并发控制使用Synchronized和CA ...
- Find a way out of the ClassLoader maze
June 6, 2003 Q: When should I use Thread.getContextClassLoader() ? A: Although not frequently asked, ...