jQuery超酷带多种动画过渡效果的幻灯片插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

pogo-slider是一款效果非常酷的带多种动画过渡效果的jQuery幻灯片插件。你可以使用该插件来创建图片或内容幻灯片。每一个幻灯片切换的时候都使用了CSS3过渡动画效果。你可以分别设置幻灯片进入和移出的过渡动画效果。

使用方法

HTML结构

该幻灯片插件的HTML结构使用嵌套的<div>结构。

<div class="pogoSlider">
    <div class="pogoSlider-slide" data-transition="slideOverLeft" data-duration="1000"  style="background-image:url(img/slide1.jpg);">
        <h2 class="pogoSlider-slide-element" data-in="slideDown" data-out="slideUp" data-duration="750" data-delay="500">Your Content Here!</h2>
    </div>
    <div class="pogoSlider-slide " data-transition="fold" data-duration="1000"  style="background-image:url(img/slide2.jpg);"></div>
</div><!-- .pogoSlider -->

初始化插件

在页面加载完毕之后，可以使用下面的方法来初始化该幻灯片插件，并调用它的一些方法。

var mySlider = $('.mySlider').pogoSlider(/* opts */).data('plugin_pogoSlider');

mySlider.pause(); // Pauses the slider on the current slide, only works if autoplay option set to true

mySlider.resume(); // Resumes the slider back to normal operation

mySlider.nextSlide(); // Transition to the next slide

mySlider.prevSlide(); // Transition to the previous slide

mySlider.toSlide(2); // Transitions to the slide index passes to the method

mySlider.destroy(); // Destroys the plugin, restoring elements to their default state

配置参数

下面是该幻灯片插件所有可用的参数选项和它的默认值。

autoplay (Boolean)：设置为true将自动播放幻灯片。
autoplayTimeout (Integer)：自动播放模式下，幻灯片的切换时间。
displayProgess (Boolean)：自动播放模式下，是否显示幻灯片切换时间的进度条。
baseZindex (Integer)：设置幻灯片的z-index属性，你想将幻灯片放置在其它页面元素的上面，可以设置为一个较大的值。
onSlideStart (Function)：幻灯片的slide开始动画时的回调函数。接收当前slide的index作为参数。
onSlideEnd (Function)：幻灯片的slide结束动画时的回调函数。接收当前slide的index作为参数。
onSliderPause (Function)：幻灯片的slide暂停时的回调函数。接收当前slide的index作为参数。
onSliderResume (Function)：幻灯片的slide从暂停状态恢复时的回调函数。接收当前slide的index作为参数。
slideTransition (String)：设置默认的动画过渡效果。只有幻灯片元素上没有设置data-transition属性时才可以使用该参数。
slideTransitionDuration (Integer)：设置默认的幻灯片过渡动画持续时间。只有幻灯片元素上没有设置data-duration属性时才可以使用该参数。
elementTransitionStart (Integer)：默认的元素过渡动画开始时间。只有幻灯片元素上没有设置data-start属性时才可以使用该参数。
elementTransitionDuration (Integer)：元素默认的过渡动画时间。只有元素上没有设置data-duration属性时才可以使用该参数。
elementTransitionIn (String)：元素默认的进入过渡动画效果。只有元素上没有设置data-in属性时才可以使用该参数。
elementTransitionOut (String)：元素默认的移开过渡动画效果。只有元素上没有设置data-out属性时才可以使用该参数。
generateButton (Boolean)：生成前后导航按钮并为它们添加导航事件。
buttonPosition (String)：导航按钮的位置。可选值有：
- TopLeft
- TopRight
- BottomLeft
- BottomRight
- CenterHorizontal
- CenterVertical
generateNav (Boolean)：是否生成圆点导航按钮。
navPosition (String)：圆点导航按钮的位置。可选值有：
- Top
- Bottom
- Left
- Right
preserveTargetSize (Boolean)：设置是否将幻灯片设置为指定的大小。该参数设置会保留原来的幻灯片比例和样式。
responsive (Boolean)：如果设置为true，在幻灯片尺寸发生改变时将调用preserveTargetSize方法。
targetWidth (Integer)：和preserveTargetSize方法一起使用来适应不同尺寸的屏幕。
targetHeight (Integer)：和preserveTargetSize方法一起使用来适应不同尺寸的屏幕。
pauseOnHover (Boolean)：是否在鼠标滑过幻灯片时暂停幻灯片的播放。

幻灯片的过渡效果

可以在每一个幻灯片元素的HTML data-transition标签中设置过渡动画效果。如果没有在HTML标签中设置过渡动画效果，插件会使用slideTransition属性

来设置过渡动画效果。

fade
slide
verticalSlide
slideLeft
slideRight
slideUp
slideDown
slideRevealLeft
slideRevealRight
slideOverLeft
slideOverRight
expandReveal
shrinkReveal
verticalSplitReveal
horizontalSplitReveal
zipReveal
barRevealDown
barRevealUp
barReveal
blocksReveal
fold
foldLeft
foldRight

动画元素

每一个幻灯片元素都可以通过在HTML标签中data-in或data-out属性来设置动画效果。如果没有设置，会使用elementTransitionIn或elementTransitionOut属性来设置。

slideDown
slideUp
slideRight
slideLeft
expand
contract
spin
sideFall
horizontal3DFlip
vertical3DFlip
3DPivot
rollLeft
rollRight
glideLeft
glideRight
flipX
flipY

创建你自己的元素动画

你可以在一个幻灯片元素上定义自己的CSS动画。每一个动画必须命名为pogoSlider-animation，并且同时又In和Out两个动画样式。In动画用于幻灯片的进入动画，Out动画用于幻灯片的离开动画。

.pogoSlider-animation-slideDownIn {
    animation-name: animationInName;
}

.pogoSlider-animation-slideDownOut {
    animation-name: animationOutName;
}