Скрытие и раскрытие div

У меня есть скрипт, который отлично работает, когда написано так:

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. Что я делаю неправильно?

ОБНОВЛЕНИЕ Возможно, я должен спросить это по-другому. Учитывая первый блок кода, как я должен изменить его, чтобы включить кнопки Prev и Next?

Источник

2 ответа

Решение

Ты хочешь сделать:

$('#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;
}
Источник

Ваши обратные вызовы событий 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);

Надеюсь, поможет

Источник
Другие вопросы по тегам