Web 开发最有用的50款 jQuery 插件集锦——《内容滑块篇》

转自：http://www.cnblogs.com/lhb25/archive/2013/04/02/50-jquery-plugins-d.html

推荐：60 USEFUL JQUERY IMAGE SLIDESHOW AND CONTENT SLIDER

HTTP://WWW.FRESHDESIGNWEB.COM/80JQUERY-IMAGE-SLIDESHOW-AND-CONTENT-SLIDER-TUTORIAL.HTML

今天给大家带来的是在 Web 项目中常用的内容滑块插件。这个系列的文章将向大家分享50款最具创新的，同时也是最有用的 jQuery 插件，这些插件分成以下类别：网页布局插件，导航插件，表格插件，滑块和转盘插件，图表插件，图片特效插件以及视频插件等等，欢迎大家关注我的后续博文。

您可能感兴趣的相关文章

• 最有用的50款 jQuery 插件集锦-网页布局篇
• 50款最有用的 jQuery 插件集锦-网站导航篇
• 50款最有用的 jQuery 插件集锦之《表单篇》
• 12款经典的白富美型 jQuery 图片轮播插件
• 精心挑选的优秀jQuery Ajax分页插件和教程

 

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

　　 插件下载     效果演示

 

您可能感兴趣的相关文章

• 60款非常酷的 jQuery 幻灯片演示和下载
• 15个款优秀的 jQuery 图片特效插件推荐
• 几款优秀的 jQuery Ajax 分页插件和教程
• Web开发者必备的20款超赞 jQuery 插件
• 分享23款美轮美奂的 jQuery 图片特效插件

 　　

本文链接：2012年最有用50款 jQuery 插件集锦之内容滑块篇