Jquery + HTML 미리보기 이미지 스크롤

Question

한 번에 10 개의 미리보기 이미지를 표시하고 나머지는 숨기고, 10 번째 미리보기 이미지로 이동하여 다음 버튼을 클릭하면 첫 번째 이미지와 이전 이미지 사이에 썸네일 목록을 만들려고합니다. 사라지고 11 일 나타난다. 자바 스크립트

jQuery(document).ready(function() { 
    var count = 0; 
    var images = 11; 
    var page = 1; 
    var current = 1; 

    jQuery('.ice-navigator li').each(function(index) { 
     count++; 

     jQuery(this).attr('id', 'menu-item-' + count); 
     jQuery(this).attr('class', 'menu-page-' + page); 

     if(count >= (page * images)) { 
      page++; 
     } 

     jQuery(this).hide(); 
    }) 

    jQuery('.ice-navigator li.menu-page-1').show(); 
    jQuery('.ice-next').click(function() { 
     if(current >= count) { 
      current = 1; 
     } else { 
      current++; 
     } 

     item = jQuery('.ice-navigator li#menu-item-' + current); 
     if(jQuery(item).hasClass('active')) { 
      jQuery(item).removeClass('active'); 
      page = jQuery('.ice-navigator li#menu-item-' + current).attr('class'); 
      jQuery(item).addClass('active'); 
     } else { 
      page = jQuery('.ice-navigator li#menu-item-' + current).attr('class'); 
     } 

     jQuery('.ice-navigator li').hide(); 
     jQuery('.ice-navigator li.' + page).show(); 
    }) 

    jQuery('.ice-previous').click(function() { 
     current--; 
     if(current <= 0) { 
      current = count;   
     } 

     item = jQuery('.ice-navigator li#menu-item-' + current); 
     if(jQuery(item).hasClass('active')) { 
      jQuery(item).removeClass('active'); 
      page = jQuery('.ice-navigator li#menu-item-' + current).attr('class'); 
      jQuery(item).addClass('active'); 
     } else { 
      page = jQuery('.ice-navigator li#menu-item-' + current).attr('class'); 
     } 
    }) 

    jQuery('.ice-navigator li').click(function() { 
     current = jQuery(this).attr('id').replace('menu-item-', ''); 
    }) 
}) 

HTML

<div class="ice-previous">Previous</div> 
<div class="ice-navigator-wrapper clearfix"> 
    <div class="ice-navigator-outer"> 
     <ul class="ice-navigator"> 
      <li>THUMBNAIL 1</li> 
      <li>THUMBNAIL 2</li> 
      [...] 
      <li>THUMBNAIL 11</li> 
      <li>THUMBNAIL 12</li> 
     </ul> 
    </div> 
</div> 
<div class="ice-next">Next</div> 

감사 :

내가 함께 노력했습니다!

Answer 1

편집 : 이제는 순환 참조와 비슷하다는 것을 알았습니다. 나는 약간의 변화를 만들었다.

는 참조 내 아래 여기 DEMO

당신이 끝에 도달 할 때 중지 일반 탐색을위한 업데이트.

내 을 확인하십시오. 이전 DEMO 여기에서 확인하십시오.

2 개의 포인터를 사용하여 시작 및 끝 위치를 관리했습니다. 시작 및 끝 위치에 따라 div를 표시하거나 숨기려면 adjustNav 함수를 구현했습니다.

Answer 2

이 jCarousel의 작업처럼 보인다 :이 기능을 제공하는 다른 플러그인이 있습니다 http://sorgalla.com/jcarousel/

. 방금 jCarousel을 다른 프로젝트에서 사용했고 이것이 내가 생각한 첫 번째 것이 었습니다.

편집하는 것은

난 당신이 플러그인을 사용하지 않으려는 실현되지 않았다. 은 일 수 있습니다. 직접 작성한 jQuery로 처리하십시오.하지만 많은 코드를 작성하게 될 것입니다.