jQuery 사이클 pugin 및 무한 루프

Question

THIS 플러그인을 사용하여 5 초마다 위로 스크롤되는 "n"문자열을 표시합니다.

특히 하단의 예는 HERE입니다.

이 플러그인 쇼 하나의 요소 7 요소를 보여 나는이 splitup 기능을 한 각각의 시간 :

$.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 개의 문자열 만 표시된다는 것입니다 ... 2 + 5보다 7 개의 문자열을 표시하고 싶습니다. 무한 루프.

어떻게 그렇게 할 수 있습니까?

감사

편집 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 이벤트 제거 할 수 위의 기술을 사용하는 경우

난 그냥 실현 또 다른 한가지는 콜백을 사용하고 슬라이드 쇼를 시작하기 전에 필요한 모든 슬라이드를 생성하기 만하면됩니다.