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。無限循環。

怎麼可能做到這一點？

感謝

編輯 http://jsfiddle.net/QZu2Z/

Answer 1

下面是一個使用before事件，並提供給由事件傳遞的選項屬性addSlide()方法的解決方案。我在代碼中添加了註釋以解釋發生了什麼。

CODE（小提琴演示：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事件的技術回調並在您開始幻燈片演示之前簡單地生成所有需要的幻燈片。