非常简单的图像滑块自动滑动

Question

嘿伙计我有一个带控件的图像滑块，但我也希望将自动滚动集成到JS中。我环顾四周但似乎无法理解在哪里插入我需要的代码并确切地知道它是什么代码..

$(document).ready(function() {
    $('.sp').first().addClass('active');
    $('.sp').hide();    
    $('.active').show();

    $('#button-next').click(function() {
        $('.active').removeClass('active').addClass('oldActive');

        if ( $('.oldActive').is(':last-child')) {
            $('.sp').first().addClass('active');
        }
        else {
            $('.oldActive').next().addClass('active');
        }

        $('.oldActive').removeClass('oldActive');
        $('.sp').fadeOut();
        $('.active').fadeIn();
    });

    $('#button-previous').click(function() {
        $('.active').removeClass('active').addClass('oldActive');    
        if ( $('.oldActive').is(':first-child')) {
            $('.sp').last().addClass('active');
        }
        else {
            $('.oldActive').prev().addClass('active');
        }
        $('.oldActive').removeClass('oldActive');
        $('.sp').fadeOut();
        $('.active').fadeIn();
    });
});

所以它实际上是一个下一个和上一个导航工作正常，我希望它只是自动滚动图像。

Answer 1

您需要创建2个新按钮Start和stop。如果您想要将它们设计为隐藏一个并显示另一个，则由您决定。这是一个示例代码

var slideshow;

$('#start').click(function(){
    slideshow = setInterval(function(){
        $('#button-next').click();
    }, 1000);
});

$('#stop').click(function(){
    clearInterval(slideshow);
});

我刚写了这个，所以可能会有一些问题，在这种情况下一定要发表评论！ :P

修改

这是自动启动

setInterval(function(){
    $('#button-next').click();
}, 1000);