jQuery цикл pugin и бесконечный цикл

Question

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

В частности, вы можете увидеть пример внизу HERE.

Этот плагин показать только один элемент каждый раз, так что я сделал эту функцию splitup, которые показывают 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/

Answer 1

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

КОД (Fiddle Demo: 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 
    }); 
}); 

Extra Примечание:

Одна вещь, чтобы иметь в виду, хотя это не должно быть проблемой для большинства людей это так это добавляет новый слайд каждый цикл, когда ваш браузер будет открываться на странице в течение длительного периода времени, начнет всасывать все больше и больше ресурсов, поскольку новые элементы постоянно добавляются в 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 

Extra Extra Примечание:

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