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>< ...
随机推荐
- php字符串的拆分截取
/* * strstr区分大小写 * stristr不区分大小写 * */ $str="test/abc.jpg"; echo stristr($str,'.'); echo '& ...
- SSM框架中各层作用
SSM是sping+springMVC+mybatis集成的框架. MVC即model view controller. model层=entity层.存放我们的实体类,与数据库中的属性值基本保持一致 ...
- npm常用功能
1. npm -v在命令行中输入该代码,可以查看npm当前版本号 2.安装依赖包2.1 npm install <name>先使用cd命令跳转到需要安装模块的目录,在该目录下执行np ...
- js修改样式
添加.删除class: $("#id").addClass("someClass"); $("#id").removeClass(" ...
- Hadoop--之RPC开发
Hadoop--之RPC开发 介绍: 百度百科: RPC(Remote Procedure Call)—远程过程调用,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议.R ...
- Table展开行
在element-ui的官网例子中,有展开行的功能,但是只能点击某行的箭头位置,才可以展开当行的内容.这不能满足业务需求,我们老大需要点击该行的任何一个位置都能展开这行内容显示.上网找了好多例子,都能 ...
- 补交第二周作业:学习ka li
在老师给的虚拟机上安装,试了n次都没有安装成功,百度上的说法也是众说纷纭. 之后重新安装了另一个版本的虚拟机,按照教程成功装上了ka li. 一. 安装VMtools:是为了方便宿主机与虚拟机间的文件 ...
- 基于Quartz.NET 实现可中断的任务(转)
Quartz.NET 是一个开源的作业调度框架,非常适合在平时的工作中,定时轮询数据库同步,定时邮件通知,定时处理数据等. Quartz.NET 允许开发人员根据时间间隔(或天)来调度作业.它实现了作 ...
- laravel管理员表中的模型
<?php namespace App; use App\Model; use Illuminate\Foundation\Auth\User as Authenticatable; class ...
- 2.python函数编程-filter函数
fileter功能主要使用在需要对数据进行多种操作,并对数据进行过滤的操作. 普通函数实现: movie = ['sb_alex', 'wupei', 'tiger', 'goosb','xxfd', ...