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