Web 開發最有用的50款 jQuery 插件集錦——《內容滑塊篇》

本文轉載自查看原文 2013-04-02 10:15 10554 內容滑塊插件/ jQuery/ 我的博文/ 幻燈片插件/ jQuery滑塊插件

　　今天給大家帶來的是在 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 過渡特效、觸屏設備、跨瀏覽器以及響應式布局。

　　本身無內置的主題，可以根據需要完全自定義。主題示例：

　　插件下載效果演示

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 滑塊。

　　官方還提供了一個方便的效果定制工具，可以配置你想要的效果，然后生成下載源碼。

　　插件下載效果演示

$(".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
});

　　兼容的瀏覽器：