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

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