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

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

<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>

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

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

<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>

<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>  

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

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