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滑块所有我需要有一个超时功能，滑块自动滑动，我需要它根据prev和下一个按钮滑动。提前致谢

DEMO

Answer 1

使用超时功能如下：

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

1000毫秒= 1秒

Answer 2

试试这个

如果您希望在点击下一个/上一个点击时暂停，请使用clearInterval(tId)停止并run()重新开始

Live Demo

var tId;
function run() {
  tId=setInterval(function() { $("#button-next").click()},1000);
}
$(function() {
    $('.sp').first().addClass('active');
    $('.sp').hide();
    $('.active').show();
    $sp = $(".sp");
    $('.nav').click(function () {
        var which = this.id.replace("button-", ""),
            next = which == "next",
            $oldActive = $('.active');
        if (next) {
            if ($oldActive.index()==$sp.length-1) {
                $('.sp').first().addClass('active');
            } else {
                $oldActive.next().addClass('active');
            }
        } else {
            if ($oldActive.index()==0) {
                $('.sp').last().addClass('active');
            } else {
                $oldActive.prev().addClass('active');
            }
        }
        $oldActive.removeClass('active');
        $('.sp').fadeOut();
        $('.active').fadeIn();
    });
    run();
});

Answer 3

我想你会想要使用jQuery.animate函数。像这样：

$(".active").animate({width:"100%"},750);

这假设滑块的默认css属性为width：0％。

编辑：新小提琴http://jsfiddle.net/qnM3x/1/

滑块需要动画超时功能

3 个答案: