jQuery和css3全屏切开页面效果幻灯片插件

这是一款炫酷的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-orientation
data-slice1-rotation
data-slice2-rotation
data-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代码请参考下载文件。