Web 开发最有用的50款 jQuery 插件集锦——《内容滑块篇》
今天给大家带来的是在 Web 项目中常用的内容滑块插件。这个系列的文章将向大家分享50款最具创新的,同时也是最有用的 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插件,图片特效插件以及视频插件等等,欢迎大家关注我的后续博文。
您可能感兴趣的相关文章
Responsive Carousel
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
您可能感兴趣的相关文章
作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
2011-04-02 推荐20款非常好的网站可用性测试工具
2010-04-02 各大浏览器 CSS3 和 HTML5 兼容速查表