Question

我是Jquery的初学者，所以我在这里看到了这个代码，我正在尝试一种方法来放置自动播放功能。有人可以帮助我吗？

<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

你可以使用JavaScript的setTimeout函数做一下这样的事情：

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

自动播放代码Jquery

1 个答案: