jQuery цикл пугин и бесконечный цикл - PullRequest
Новая
       22

jQuery цикл пугин и бесконечный цикл

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

Я использую плагин THIS , чтобы показать "n" строк, которые прокручиваются вверх каждые 5 секунд.

В частности, вы можете увидеть пример внизу ЗДЕСЬ .

Этот плагин показывает только один элемент каждый раз, поэтому я выполнил эту функцию разбиения, которая показывает 7 элементов: 

$.fn.splitUp = function (splitBy, wrapper) {
    $all = $(this).find('>*');
    var fragment = Math.ceil($all.length / splitBy);
    for (i = 0; i < fragment; i++)
        $all.slice(splitBy * i, splitBy * (i + 1)).wrapAll(wrapper);
    return $(this);
}

$('#list').splitUp(7, '<li><li/>').cycle({
    fx: 'scrollUp',
    pause: 1,
    timeout: 5000,
    speed: 2000
});

работает нормально.

Проблема в том, что если у меня 9 строк, отображаются первые 7 и только 2 строки ... Я хотел бы показать 7 строк, а не 2 + 5. Бесконечный цикл.

Как это можно сделать?

Спасибо

EDIT http://jsfiddle.net/QZu2Z/

1 Ответ

3 голосов
/ 06 января 2012

Вот решение, использующее событие before и метод addSlide(), доступные для свойства options, переданного событием.Я добавил комментарии к коду, чтобы объяснить, что происходит.

КОД (Демонстрация скрипки: http://jsfiddle.net/QZu2Z/4/)

var pos = 0;
var count = 1;
var maxItems = 7;
var items = [];

function createSlide()
{
    // This function takes the array of items we have and builds a new ul
    // list based on maxitems and last pos, the result is multiple calls
    // to this function produces output like so:

    //  First pass returns: 1 2 3 4 5 6 7
    // Second pass returns: 8 9 1 2 3 4 5
    //  Third pass returns: 6 7 8 9 1 2 3
    //  Forth pass returns: 4 5 6 7 8 9 1
    // and so forth...

    var elem = $('<ul class="list"></ul>');

    for(i = 1; i <=9; i++)
    {
        if (pos >= 9)
        {
            pos = 0;
        }

        if(count <= maxItems)
        {
            count = count + 1;

            $(elem).append(items[pos]);

            pos = pos + 1;
        }
    }

    count = 1;

    return elem;
}

function onBefore(curr, next, opts) {
    // This is the onBefore slide event; we're simply checking if the addSlide
    // method is available on the opts object as apparently on the first pass,
    // addSlide is undefined (plugin hasn't yet created the function);

    if (!opts.addSlide)
    {
        return;
    }

    // addSlide function is available so generate the next slide and add it
    opts.addSlide(createSlide());
}

$(document).ready(function() {
    // Generate an array of items to use in our cycle
    $(".wrapper li").each(function(i) {
        items[i] = $(this).clone().wrap('<div>').parent().html();
    });

    // Grab the slideshow object
    var $ss = $('.wrapper');

    // Erase the contents, we have the data stored in the array [items]
    $ss.empty();

     // Create new slide and append it to our object, results in 1 2 3 4 5 6 7
    $ss.append(createSlide());

    // Create another slide and append it to our object, results 8 9 1 2 3 4 5
    $ss.append(createSlide());

    // start the slideshow (a slideshow can't be started unless there's 2 
    // slides hence why we created two slides above to start with).  The
    // before/onBefore event will add a new slide every cycle of the slideshow.
    $ss.cycle({
        fx: 'scrollUp',
        pause: 1,
        timeout: 5000,
        speed: 2000,
        before: onBefore
    });
});

Дополнительное примечание:

Следует иметь в виду одну вещь, хотя для большинства людей это не должно вызывать проблем, поскольку она добавляет новый слайд каждый цикл, и ваш браузер долго остается открытым на странице.Период времени начнет поглощать все больше и больше ресурсов, так как новые элементы постоянно добавляются в DOM, однако, есть и исправление, когда вы перебираете циклически их обратно к исходной точке, и никаких новых слайдовнеобходимо добавить, и это может зациклить их, визуально это легче увидеть, чем объяснить 

 -> createSlide() = 1 2 3 4 5 6 7 (store this first results to compare with rest)
|   createSlide() = 8 9 1 2 3 4 5
|   createSlide() = 6 7 8 9 1 2 3
|   createSlide() = 4 5 6 7 8 9 1
|   createSlide() = 2 3 4 5 6 7 8
|   createSlide() = 9 1 2 3 4 5 6
|   createSlide() = 7 8 9 1 2 3 4
|   createSlide() = 5 6 7 8 9 1 2
 -< createSlide() = 3 4 5 6 7 8 9
    createSlide() = 1 2 3 4 5 6 7 (this value equals the first result so no new 
slides need to be added, let the process use the slides that are already added
and loop back to the beginning

Дополнительное дополнительное примечание:

Еще одна вещь, которую я только что понял, если вы используете вышеописанную технику, то технически вы можете избавиться от обратного вызова события before и просто сгенерировать все необходимые слайды, прежде чем вы даже запустите слайд-шоу.

...