创建动画图片/内容集展播的jQuery插件:Pogo Slider

jopen 7年前

Pogo Slider是一个jQuery插件,它允许你创建动画图片/内容滑块。 CSS动画用于幻灯片之间的过渡。

HTML

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

Javascript

$(document).ready(function () {            var mySlider = $('.my-slider').pogoSlider().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        });

项目主页:http://www.open-open.com/lib/view/home/1430787811460