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

但是我想添加一个next和prev按钮，所以我重写了这个，我觉得它会起作用。

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按钮工作。我做错了什么？

更新也许我应该这样问。鉴于第一个代码块，我应该如何更改它以启用Prev和Next按钮？

Answer 1

你想这样做：

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

和

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

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

通过将您的调用包装到一个函数中，这会使点击调用该函数，而该函数又会调用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);

希望有所帮助

隐藏和揭示div

2 个答案: