隱藏和顯示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，然后不淡入和淡出它們，也不允許next和prev按鈕起作用。 我究竟做錯了什么？

更新也許我應該提出不同的要求。 給定第一段代碼，如何更改它以啟用“上一個”和“下一個”按鈕？

Answer 1

您想做：

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

和

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

相反，與您當前的代碼一樣， Slide(1)已經在計算中，而click函數將僅調用從其返回的值（由於該函數中沒有返回值，因此將不會對其進行定義）

通過將對Slide的調用包裝到一個函數中，這使clicks調用了該函數，進而調用了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);

希望能幫助到你