今天給大家帶來的是在 Web 項目中常用的內容滑塊插件。這個系列的文章將向大家分享50款最具創新的，同時也是最有用的 jQuery 插件，這些插件分成以下類別：網頁布局插件，導航插件，表格插件，滑塊和轉盤插件，圖表插件，圖片特效插件以及視頻插件等等，歡迎大家關注我的后續博文。
您可能感興趣的相關文章
Responsive Carousel
responsive-carousel 是一個內容傳送帶插件，支持鼠標、觸摸和鍵盤操作。默認包含 slide/drag 過渡特效，你也通過 data 屬性應用以及包含額外的 CSS 樣式。
在源文件夾里還包含其它的擴展，例如翻轉和淡入淡出的過渡效果，自動播放，分頁等等。使用示例：
<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 插件，它可以用來作為一個內容滑塊，旋轉木馬，滾動的網站橫幅或一個圖片庫。
調用方式：
$(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 這款插件可用於創建精美的小冊子風格效果，支持“翻頁”模式的導航，可以用於顯示任何內容，如圖像、文本和視頻等待。
使用示例：
<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 的瀏覽器將優雅降級到簡單的淡入淡出過渡動畫。使用方法：
<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 等古老的瀏覽器。
使用示例：
<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 插件，用於創建響應的幻燈片。支持下列參數：
$(".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
您可能感興趣的相關文章