jquery help needed - creating automatic slideshow
I've got some code which generates prev/next buttons and will cycle 开发者_开发百科through a group of images using two functions nextPhoto and prevPhoto. I was wondering if anyone could help me turn this code into an automatic slideshow?
Here's my code:
$max = 8;
$current = 1
function nextPhoto() {
if ($current != $max) {
$('.slider'+($current)+'').hide();
$('.slider'+($current+1)+'').show();
$('.slider'+($current+1)+'').css('left', '20%');
$('.slider'+($current+1)+'').animate({left:'0%'}, {duration:500, easing:"easeOutExpo", queue:false});
resizeImages();
$current++;
}
if ($current == 2) {
$('#background .left').animate({left:'0px'}, {duration:600, easing:"easeOutExpo", queue:false});
}
if ($current == $max) {
$('#background .right').animate({right:'-85px'}, {duration:600, easing:"easeOutExpo", queue:false});
setInterval("restartSlider()", 5000);
}
}
function prevPhoto() {
resizeImages();
if ($current != 1) {
$('.slider'+($current)+'').hide();
$('.slider'+($current-1)+'').show();
$('.slider'+($current-1)+'').css('left', '-20%');
$('.slider'+($current-1)+'').animate({left:'0%'}, {duration:500, easing:"easeOutExpo", queue:false});
resizeImages();
$current --;
}
if ($current == 1) {
$('#background .left').animate({left:'-85px'}, {duration:600, easing:"easeOutExpo", queue:false});
}
if ($current == $max-1) {
$('#background .right').animate({right:'0px'}, {duration:600, easing:"easeOutExpo", queue:false});
}
}
$('.right').mouseup(function(){
nextPhoto();
})
$('.left').mouseup(function(){
prevPhoto();
})
I would suggest you to use already available and widely use plugin for this jQuery cycle instead of writing it your own. Take a look at this it offers a lot of features. I am sure it will definitely help you.
Assuming your nextPhoto() and prevPhoto() methods are working, I would just set an interval for a timer.
var delay = 5000; //5 seconds
var timer = window.setInterval('nextPhoto()', delay);
and to stop it
clearInterval(timer);
精彩评论