javascript - slider 需要超时功能动画

Question

<div id="slider-wrapper">
    <div id="slider">
        <div class="sp" style="background: blue;">akjdfalfkdj</div>
        <div class="sp" style="background: yellow;">akjdfautlfkdkjkhkj</div>
        <div class="sp" style="background: green;" >akjdfalfkdiyukjkhkj</div>
        <div class="sp" style="background: red;">akjdfalfkdkkljjkhkj</div>
    </div>
    </div>
<div id="nav"></div>
<div id="button-previous">prev</div>
<div id="button-next">next</div>

CSS

#slider-wrapper {width:500px; height:200px;}
#slider {width:500px; height:200px; position:relative;}
.sp {width:500px; height:200px; position:absolute;}

#nav {margin-top:20px; width:100%;}
#button-previous {float:left;}
#button-next {float:right;}

JQUERY

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

我有上面的 jquery slider ，我需要有一个 slider 自动滑动的超时功能，我还需要它根据上一个和下一个按钮滑动。提前致谢

DEMO

Answer 1

超时函数的使用如下:

setInterval(function(){
//your function you want to timeout
},1000);

1000 毫秒 = 1 秒