jQuery Slideshow Next/Previous

I'm new to jQuery and I'm just wondering the easiest and most efficient way to create next/previous buttons to go through the slideshow. My code is as follows:

    run = setInterval("switchSlide()", 2000);

    $(document).ready(function() {
        $('#slideshow img:gt(0)').hide();

        $('#slideshow').hover(function() {
            clearInterval(run);
        }, function() {
            run = setInterval("switchSlide()", 2000);
        });

        $('#play').click(function() {
            run = setInterval("switchSlide()", 2000);
        });

        $('#stop').click(function() {
            clearInterval(run);
        });
        $('#previous').click(function() {
                    $('#slideshow img:first').fadeOut(1000).prev().fadeIn(1000).end().appendTo('#slideshow');
                });

                $('#next').click(function() {
                    $('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
                });

    });

    function switchSlide() {
        $('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
    }

---

I'm assuming next() will get you the next image because this is what you do in switchSlide(). You can add a div element in your HTML

  <div id="next"></div>

then attach a click event to it which will call next(), essentially performing the same action as switchSlide()

  $('.next').click(function(){ 
     $('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
   })

the same can be done for previous

链接地址: http://www.djcxy.com/p/64760.html

上一篇: jquery显示/隐藏div

下一篇: jQuery Slideshow Next / Previous