这是一款炫酷的jQuery和css3全屏切开页面效果幻灯片插件。插件中使用了jQuery cond。jQuery cond是Ben Alman写的，它是一个“if-then-else”链式结构的jQuery插件。插件中那些可以动画的图标来自于Alan Carr。
HTML
包裹div给它一个class为sl-slide-wrapper，每一个slide都带有class为sl-slide。demo中有两种类型的导航按钮：箭头和圆点。
<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> |
每一个slide都有一些自己的data-attributes，它们用于控制各自不同的效果，如旋转角度、缩放等等。下面列出所有的data-attributes：
data-orientationdata-slice1-rotationdata-slice2-rotationdata-slice1-scale data-slice2-scale |
data-orientation可以设置为 “vertical” 或 “horizontal” 。data-slice1-rotation和data-slice2-rotation是设置旋转角度的。data-slice1-scale和data-slice2-scale用于设置缩放值。
所以，第一个slide的html结构如下：
<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2"> |
上面的html结构是一个基本结构，为了能产生动画效果，我们需要使用javascript在运行时将结构改变为如下：
<div id="slider" class="sl-slider-wrapper"> <div class="sl-slider"> <div class="sl-slides-wrapper"> <div class="sl-slide bg-1 sl-slide-horizontal"> <div class="sl-content-wrapper"> <div class="sl-content"> <!-- the content --> </div> </div> </div> <!-- ... --> </div> </div> <!-- navs --></div> |
页面中的所有内容将被放到sl-slide-inner中。
在这时候，当我们点击下一个幻灯片或前一个幻灯片时，我们将以当前的幻灯片的内容来做页面切割：
<div class="sl-slide sl-slide-horizontal" > <div class="sl-content-slice"> <div class="sl-content-wrapper"> <div class="sl-content"> <!-- ... --> </div> </div> </div> <div class="sl-content-slice"> <div class="sl-content-wrapper"> <div class="sl-content"> <!-- ... --> </div> </div> </div></div> |
可用参数
下面是一些可用的参数：
$.Slitslider.defaults = { // transitions speed speed : 800, // if true the item's slices will also animate the opacity value optOpacity : false, // amount (%) to translate both slices - adjust as necessary translateFactor : 230, // maximum possible angle maxAngle : 25, // maximum possible scale maxScale : 2, // slideshow on / off(自动播放，默认关闭) autoplay : false, // keyboard navigation(键盘导航，默认开启) keyboard : true, // time between transitions interval : 4000, // callbacks onBeforeChange : function( slide, idx ) { return false; }, onAfterChange : function( slide, idx ) { return false; }}; |
CSS代码请参考下载文件。
