javascript - jQuery Slideshow Next/Previous

Question

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

Answer 1

我假设 next() 会给你下一张图片，因为这是你在 switchSlide() 中所做的。您可以在 HTML 中添加 div 元素

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

然后为其附加一个单击事件，该事件将调用 next()，本质上执行与 switchSlide() 相同的操作

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

以前也可以这样做