jQuery幻灯片下一个/上一个 [英] jQuery Slideshow Next/Previous

问题描述

我是jQuery的新手，我想知道创建下一个/上一个按钮以浏览幻灯片的最简单，最有效的方法.我的代码如下:

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

推荐答案

我假设next()将为您提供下一张图像，因为这是您在switchSlide()中所做的.您可以在HTML中添加div元素

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>

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

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

这篇关于jQuery幻灯片下一个/上一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！