javascript - 隐藏和显示 div

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，然后不会将它们淡入和淡出或允许下一个和上一个按钮工作。我做错了什么？

更新 也许我应该换个方式问这个问题。给定第一段代码，我应该如何更改它以启用“上一个”和“下一个”按钮？

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;
}