开发者

jquery help needed - creating automatic slideshow

开发者 https://www.devze.com 2023-04-02 10:30 出处:网络
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

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);
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号