회전 목마를 무한히 스크롤하지 마십시오.

Question

무한 스크롤링을 작성했습니다. 무한 스크롤링을 수행하는 가장 좋은 방법은 무엇이 될지 궁금합니다.

지금 사용자는 한 번에 볼 수있는 항목 수를 numSlide로 지정합니다. 기본적으로 사용자는 오른쪽 화살표를 클릭하고 prevLoop 또는 nextLoop 중 하나를 호출하는 .animate() 메서드를 사용합니다. 둘 중 하나는 기본적으로 지정된 요소 수를 가져와 그에 따라 <ul></ul>의 시작 또는 끝으로 이동합니다.

나는 지금까지 가지고 있지만 무한 스크롤을 해제하는 옵션을 소개하려고합니다 (예 : 목록의 항목 만 표시하고 각면의 끝에 도달하면 prevLoop/nextLoop.

내 아이디어는 기본적으로 infinite라는 변수를 설정합니다. 클릭 기능 (rightClick() 및 leftClick()) 중 하나가 무한인지를 확인하고, 맞으면 정상 스크롤 코드를 사용합니다. 내 생각에 : 안에있는 요소의 수를 numElements 안에 넣고 각 클릭을 통해 count 변수를 증가시키고 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 
} 
} 

누구든지 다른 아이디어를 가지고 :

이 설정 같은 것? 그것은 여기에 작동하는 데모이기 때문에 (어떤 <li>의 이동이었다되기 전과) <li> "마지막"에 대한 참조를 유지하는 것이 문제를 처리하고로 .index()를 사용하는

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

Answer 1

한 가지 방법 이처럼 <ul>에서 현재의 위치를 ​​찾을 수 :

var lastIndex = last.index(); 

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

또 한가지 : 당신은에 코드를 돌려 고려해야한다

. 그들은 매우 쉽게 쓸 수 있습니다. 당신은 그것을 배포 할 필요가 없습니다. 작업을보다 쉽게하기 쉽도록 만드는 것입니다. 특히 options and defaults의 혜택을 누릴 수 있으며 data method을 사용하여 상태 (예 : "<li>")를 유지할 수 있습니다.