0

我有一个脚本，当这样写时可以正常工作：

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

更新 也许我应该以不同的方式问这个问题。给定第一个代码块，我应该如何更改它以启用 Prev 和 Next 按钮？

4

2 回答 2

1

你想做：

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

和

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

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

通过将您对 Slide 的调用包装在一个函数中，这使得点击调用该函数，该函数又调用 Slide

您还希望将您的索引设置为len - 1if 你去负数，而不是 to len，因为你正在处理一个零索引数组：

if (i<0) {
    i = len - 1;
}
于 2016-09-09T14:01:12.513 回答
0

您的 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);

希望能帮助到你

于 2016-09-09T14:59:38.733 回答