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

Question

Hey guys I have an image slider that has controls but I also want to intergrate an auto scroll into the JS too. I have looked around but cannot seem to understand where to insert the code I need and exact what code it is..

$(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();
    });
});

So it has literally a next and previous nav which works fine I would like it to just auto scroll through the images.

Answer 1

You will need to create 2 new buttons Start and stop . It's up to you if you want to style them to hide one and show the other. Here's a sample code

var slideshow;

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

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

I just wrote this so there may be some issues, in which case be sure to leave a comment! :P

EDIT

Here's for automatic start

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