Делаем карусель не бесконечно прокручивать - PullRequest
Новая
       30

Делаем карусель не бесконечно прокручивать

0 голосов
/ 13 января 2012

Я написал эту бесконечную карусель прокрутки, и мне интересно, каким будет лучший способ сделать бесконечную прокрутку.

Прямо сейчас пользователь указывает, сколько элементов они хотели бы видеть в представлении @ время (в numSlide). В общем, пользователь нажимает на стрелки вправо, он использует метод .animate (), который вызывает либо prevLoop, либо nextLoop. Любой из них в основном просто вытягивает указанное количество элементов и перемещает их либо в начало, либо в конец <ul></ul> соответственно.

Я дошел до этого, но теперь я пытаюсь ввести опцию отключения бесконечной прокрутки (например, показывать только элементы в списке, и как только вы доберетесь до конца каждой стороны, это предотвращает вызов prevLoop / nextLoop.

Моя идея в основном установить переменную с именем бесконечность. В любой из функций щелчка (rightClick() и leftClick()) проверьте, является ли бесконечным значение true. Если это так, используйте обычный код прокрутки. В противном случае я думаю о том, чтобы: взять число элементов в <ul>, которое находится в numElements, установить переменную count для увеличения при каждом щелчке и проверить, является ли количество одинаковым или меньшим из numElements. Если это > numElements, тогда я не позволю ни одной из функций больше анимировать. Я чувствую, что это очень быстро запутается.

Это будет настроено так: 

    var count = numElements;
    function rightClick() {
    var cfirst = container.find('li').first(), //the current first element
        tomove = cfirst.nextLoop(numSlide - 1, true), //the elements that need to move
        nfirst = tomove.last().nextLoop(1, false); //the new first element

    /*
       Pretend we currently have [A, B, C, D, E, F, G, H, I] and numSlide is 3
       cfirst === [A]
       tomove === [A, B, C]
       nfirst === [D]
    */

    var indent = cfirst.offset().left - nfirst.offset().left;

    if (infinite) {
    ul.not(':animated').animate({ // not:animated makes sure we only get one @ a time
        'left': indent
    }, 'fast', function() {
        tomove.appendTo(ul); //Move them to the end of the UL
        ul.css({ // left indent of ul
            'left': 0
        });
    });
} else {
     // Infinite is turned off, handle it in here
    count = count -1;
    // Animate numElements - numSlide
}
}

У кого-нибудь есть еще идеи? Как это здесь работает демо:

http://jsfiddle.net/someprimetime/AYfhn/

1 Ответ

1 голос
/ 13 января 2012

Один из способов справиться с этим - сохранить ссылку на «последний» <li> (как это было до перемещения любых <li> с) и использовать .index(), чтобы найти его текущий позиция в <ul>, вот так: 

var lastIndex = last.index();

if (infinite || (lastIndex + 1 >= rowSize + numSlide)) {
    // animate
} else if (lastIndex >= rowSize) {
    // animate using smaller numSlide
} else {
    // don't animate
}

Еще одна вещь:

Вам следует подумать о том, чтобы превратить ваш код в плагин jQuery . Их очень легко написать. Вам не нужно распространять это или что-либо; это просто для того, чтобы облегчить работу. В частности, вы можете воспользоваться опциями и значениями по умолчанию , и вы можете сохранить состояние (например, «последний» <li>), используя метод данных .

...