我有一个非常好的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/