隐藏和揭露潜水

Question

我有一个脚本，当这样写的时候工作得很好:

var isPaused = false,
jQuery(function () {
    var $els = $('div[id^=film]'),
        i = 0,
        len = $els.length;
    $els.slice(1).hide();
    setInterval(function () {
        if (!isPaused) {
            if (len > 1) {
                $els.eq(i).fadeOut(function () {
                    i = (i + 1) % len;
                    $els.eq(i).fadeIn();
                    });
            }
        }
    }, 3500);
});

但是我想添加一个下一步和上一个按钮，所以我这样重写，我认为这是可行的。

var isPaused = false,
    $els = $('div[id^=film]'),
    i = 0,
    len = $els.length;
    $els.slice(1).hide();
    setInterval(Slide(1), 3500);
function Slide (x) {
    if (!isPaused) {
        if (len > 1) {
            $els.eq(i).fadeOut(function () {
                i = (i + x) % len;
                if (i<0) {
                    i = len;
                }
                $els.eq(i).fadeIn();
                });
        }
    }
}
$('#next').click(Slide(1));
$('#prev').click(Slide(-1));

但是这段代码只是在页面加载时显示所有div，然后不让它们淡出或允许next和prev按钮工作。我做错了什么?

也许我应该换个方式问这个问题。给定的代码的第一个块，我应该如何改变它，使上一个和下一个按钮?

Answer 1

你想做的是:

$('#next').click(function(){Slide(1);});
$('#prev').click(function(){Slide(-1);});

和

setInterval(function(){Slide(1);}, 3500);

相反，与您当前的代码一样，Slide(1)已经被计算，并且click函数将只调用从它返回的值(因为它在函数中没有返回，因此不会定义)

通过将对Slide的调用包装在函数中，这使得单击调用该函数，该函数反过来调用Slide

你也想设置你的索引为len - 1，如果你是负的，而不是len，因为你正在处理一个零索引数组:

if (i<0) {
    i = len - 1;
}

Answer 2

您的jQuery事件回调必须在加载结构中，如:

// Wait for DOM load
$(document).ready(function() {
  $('#next').click(function(){ Slide(1); });
  $('#prev').click(function(){ Slide(-1); });
});

我想建议你改变你的:

setInterval(Slide(1), 3500);

setInterval(function() { 
  Slide(1); 
}, 3500);

希望有所帮助