如何自动播放jQuery滑块？

我有一个非常好的工作jQuery网页中的滑块的代码。它的所有工作导航完全功能。问题是我不能让它自动播放。请告诉我如何修改或添加某些内容以使其自动播放。如何自动播放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(); 
}); 


});

来源

2014-04-17 Vanjul

查看代码中使用setInterval。 – Mike

我不知道如何使用它。你能举个例子吗？ – Vanjul

我会建议你做的是获得下一个和以前的幻灯片功能。做完这些之后，您可以轻松设置下一个功能的超时时间。下面的代码没有经过测试，但应该接近您可以在您的应用程序中使用的内容：

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

来源

2014-04-17 13:35:54

这种方法从来没有跨过我的脑海！但它的准确和重点！工作了！谢谢：） – Vanjul

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

对于这里更多阅读：http://www.slidesjs.com/

来源

2014-04-17 13:27:43

如何自动播放jQuery滑块？

回答

相关问题