Autoplay code Jquery

Question

I'm very beginner in Jquery, so I see that code here and I was trying one way to put autoplay function with some delay. Does anyone can help me?

<script>

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



    });    
});
</script>

Answer 1

you can just use JavaScript's setTimeout function an do something like this:

http://jsfiddle.net/3yv59qf3/1/

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


$('#autoplay').click(function () {
    if ($(this).data("play")) {
        $(this).data("play", false).text("autoplay");
    } else {
        $(this).data("play", true).text("stop autoplay");
        autoplay();
    }

});

var autoplay = function () {
    setTimeout(function () {
        if ($('#autoplay').data("play")) {
            next(autoplay);
        }
    }, 1000);
};


var next = function (cb) {
    $('.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("slow", function () {
        if (typeof cb === "function") {
            cb()
        }
    });
};



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

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