Question

我有一个非常好的工作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();
});


});

Answer 1

它可能无法回答您的问题，但此网站可能会让您的工作更轻松。您只需要包含两个jquery文件，通过更改它们的属性，您可以创建不同类型的图像幻灯片。

更多信息请点击此处：http://www.slidesjs.com/

Answer 2

我建议你制作能够获得下一张和上一张幻灯片的功能。完成后，您可以轻松地为下一个功能设置超时。下面的代码未经过测试，但应该与您在应用程序中使用的内容接近：

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

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

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

    setTimeout(next,5000);
}); 

function next() {   
    $('.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();
}

function previous() {
    $('.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滑块？

2 个答案: