jquery.slitslider.js - 全屏撕裂效果的幻灯片插件

该插件使用jQuery和CSS3动画创建全屏效果幻灯片特效。每一张幻灯以不同的动画效果切换：从水平中间上下切开或垂直中间断开。使用data-attributes属性来定义类型，旋转和角度等幻灯属性。效果酷毙了！

这本是一篇使用jQuery和CSS3创建全屏效果幻灯片特效的教程，所以调用起来并没那么方便，权当发教程学习之。

插件安装

该插件除了引用jQuery以外还需要引用jquery cond（全支持使用链式来书写if-then-else语句）和 modernizr 前端框架

<script src="http://apps.bdimg.com/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
<script type="text/javascript" src="js/jquery.ba-cond.min.js"></script>
<script type="text/javascript" src="js/jquery.slitslider.js"></script>

HTML：

<div id="slider" class="sl-slider-wrapper">

	<div class="sl-slider">
	
		<div class="sl-slide bg-1">
			<div class="sl-slide-inner">
				<div class="deco" data-icon="H"></div>
				<h2>A bene placito</h2>
				<blockquote>
					<p>You have just dined...</p>
					<cite>Ralph Waldo Emerson</cite>
				</blockquote>
			</div>
		</div>
		
		<div class="sl-slide bg-2">
			<div class="sl-slide-inner">
				<div class="deco" data-icon="q"></div>
				<h2>Regula aurea</h2>
				<blockquote>
					<p>Until he extends the circle...</p>
					<cite>Albert Schweitzer</cite>
				</blockquote>
			</div>
		</div>

		<div class="sl-slide bg-2">
			<!-- ... -->
		</div>

		<!-- ... -->

	</div>

	<nav id="nav-arrows" class="nav-arrows">
		<span class="nav-arrow-prev">Previous</span>
		<span class="nav-arrow-next">Next</span>
	</nav>

	<nav id="nav-dots" class="nav-dots">
		<span class="nav-dot-current"></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</nav>

</div>

使用data-attributes属性来定义动画类型，例如：

<div class="sl-slide bg1" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">

Javascript调用

			$(function() {
			
				var Page = (function() {

					var $navArrows = $( '#nav-arrows' ),
						$nav = $( '#nav-dots > span' ),
						slitslider = $( '#slider' ).slitslider( {
							onBeforeChange : function( slide, pos ) {

								$nav.removeClass( 'nav-dot-current' );
								$nav.eq( pos ).addClass( 'nav-dot-current' );

							}
						} ),

						init = function() {

							initEvents();
							
						},
						initEvents = function() {

							// add navigation events
							$navArrows.children( ':last' ).on( 'click', function() {

								slitslider.next();
								return false;

							} );

							$navArrows.children( ':first' ).on( 'click', function() {
								
								slitslider.previous();
								return false;

							} );

							$nav.each( function( i ) {
							
								$( this ).on( 'click', function( event ) {
									
									var $dot = $( this );
									
									if( !slitslider.isActive() ) {

										$nav.removeClass( 'nav-dot-current' );
										$dot.addClass( 'nav-dot-current' );
									
									}
									
									slitslider.jump( i + 1 );
									return false;
								
								} );
								
							} );

						};

						return { init : init };

				})();

				Page.init();
			});

参数

• speed：过度的速度(毫秒)
• autoplay：自动播放，默认为false
• optOpacity：动画时透明效果true
• interval：幻灯片切换间隔时间(毫秒)
• translateFactor：定义translateY、translateX值(%)
• maxAngle：最大可能旋转角度
• maxScale：最大可能scale缩放
• keyboard：是否支持键盘切换，默认为true

事件

• onBeforeChange：开始切换前的回调函数
• onAfterChange：切换后的回调函数