Question

我有一些代码可以生成上一个/下一个按钮，并使用两个函数nextPhoto和prevPhoto循环显示一组图像。我想知道是否有人可以帮助我将此代码转换为自动幻灯片？

这是我的代码：

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

Answer 1

我建议你使用已经可用且广泛使用的jQuery cycle插件，而不是自己编写。看看它提供了很多功能。我相信它一定能帮到你。

Answer 2

假设你的nextPhoto（）和prevPhoto（）方法正常，我只想设置一个计时器的间隔。

var delay = 5000; //5 seconds
var timer = window.setInterval('nextPhoto()', delay);

并阻止它

clearInterval(timer);

需要jquery帮助 - 创建自动幻灯片

2 个答案: