创建动画图片/内容集展播的jQuery插件:Pogo Slider
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 });
本文由用户 jopen 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
转载本站原创文章,请注明出处,并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台,欢迎各类分享!