創建動畫圖片/內容集展播的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 --></pre><br />

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

            });</pre> <p><strong>項目主頁：</strong><a href="http://www.baiduhome.net/lib/view/home/1430787811460" rel="nofollow" target="_blank">http://www.baiduhome.net/lib/view/home/1430787811460</a></p>