Question

我是jQuery的新手，我只是想知道创建下一个/上一个按钮以进行幻灯片放映的最简单，最有效的方法。我的代码如下：

    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>

然后将一个click事件附加到它，它将调用next（），基本上执行与switchSlide（）相同的操作

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

以前的

也可以这样做

jQuery幻灯片下一个/上一个

1 个答案: