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

在线预览    源码下载