如何自动播放jquery滑块

How to autoplay a jquery slider?

本文关键字：滑块 jquery 自动播放      更新时间：2023-09-26

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

});

我建议您制作下一张和上一张幻灯片的函数。完成后，您可以轻松地为下一个函数设置超时。以下代码没有经过测试，但应该接近您在应用程序中可以使用的代码：

$(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文件，通过更改它们的属性，就可以创建不同类型的图像幻灯片。

欲了解更多信息，请阅读此处：http://www.slidesjs.com/

相关文章：