jQuery : 루핑 연속 div 회전판

Question

div 세트를 순환하는 매우 간단한 회전식 회전식 송곳을 만들었습니다. 지금은 약간 붙어 있습니다 ...이 경우에는 slide 01에서 slide 07까지 탐색 할 수 있습니다. 이상적으로 나는 회전 목마를 반복하고 싶습니다. 따라서 slide 07 후에는 slide 01이됩니다. 내가 컨베이어 플러그인을 사용하지 않는 이유는 오버행을 원한다는 것입니다. 따라서 slide 01에있을 때 왼쪽에 slide 07의 50 픽셀, 오른쪽에 slide 02의 50 픽셀을 볼 수 있습니다. http://jsfiddle.net/neal_fletcher/BBXnP/3/

HTML :

<div class="outerwrapper"> 
    <div class="innerwrapper"> 
     <div class="inner-slide">SLIDE 01</div> 
     <div class="inner-slide">SLIDE 02</div> 
     <div class="inner-slide">SLIDE 03</div> 
     <div class="inner-slide">SLIDE 04</div> 
     <div class="inner-slide">SLIDE 05</div> 
     <div class="inner-slide">SLIDE 06</div> 
     <div class="inner-slide">SLIDE 07</div> 
    </div> 
</div> 

<div id="left">LEFT</div> 
<div id="right">RIGHT</div> 

jQuery를 :가 BBC 홈페이지 슬라이더처럼 조금 일 것 결국 참고

$(function() { 

    var animating = false, 
     outerwrap = $(".outerwrapper"); 

    $("#right, #left").click(function() { 
     if (animating) { 
      return; 
     } 
     var dir = (this.id === "right") ? '+=' : '-=', 
      width = $(".inner-slide").width(); 
     animating = true; 
     outerwrap.animate({ 
      scrollLeft: dir + width 
     }, 600, function() { 
      animating = false; 
     }); 
    }); 

}); 

: http://www.bbc.co.uk을
여기 내 jsFiddle 데모를 참조하십시오 아래의 다음 섹션과 이전 섹션을 볼 수 있습니다.
모든 의견을 크게 높이세요!

Answer 1

이것은 결코 완벽한 것은 아니지만 어디로 갈지에 대한 일반적인 아이디어를 줄 수 있습니다. 또한 코드를 섹션으로 나누는 자유를 조금씩 취했습니다.

기본적인 아이디어는 처음 2와 마지막 2를 복제하여 목록의 반대쪽 끝에 배치하는 것입니다.

Check it out

초기화 변수 : 랩퍼

slide = function(dir, speed) { 
     if(!animating) { 
      animating = true; 
      dir == 'right' ? slideIndex++ : slideIndex--; 
      slideIndex == slideLen - 1 ? slideIndex == 0 : ''; 

      if(slideIndex == 0 && dir == 'left') { 
       //if the slide is at the beginning and going left 

       slideIndex = slideLen + 1;     
       $wrapper.animate({ 
        scrollLeft: slideIndex * slideWidth + 'px' 
       }, 0, function() { 
        animating = false;  
       }); 
       slideIndex--; 

      } else if(slideIndex == slideLen + 2 && dir == 'right') { 
       //if the slide is at the end and going right 

       slideIndex = 1;     
       $wrapper.animate({ 
        scrollLeft: slideIndex * slideWidth + 'px' 
       }, 0, function() { 
        animating = false;  
       }); 
       slideIndex++; 

      } 
      $wrapper.animate({ 
       scrollLeft: slideIndex * slideWidth + 'px' 
      }, speed, function() { 
       animating = false;  
      }); 
     } 
    }; 

실제 executio을 슬라이드

build = function() { 
     $firstClone = $('.inner-slide').eq(0).clone(); 
     $secondClone = $('.inner-slide').eq(1).clone(); 
     $preLastClone = $('.inner-slide').eq(slideLen - 2).clone(); 
     $lastClone = $('.inner-slide').eq(slideLen - 1).clone(); 
     $wrapper.find('.innerwrapper').append($firstClone, $secondClone).prepend($preLastClone, $lastClone); 
     $wrapper.animate({ 
      scrollLeft: '+=' + slideWidth * slideIndex + 'px' 
     }, 0); 
    }, 

기능 :

var animating = false, 
    slideWidth = $('.inner-slide').width(), 
    $wrapper = $('.outerwrapper'), 
    slideIndex = 2, 
    slideLen = $('.inner-slide').length, 

기본 프레임 워크를 구축 n :

$(function() { 
    build(); 
    $('#right, #left').on('click', function() { 
     slide($(this).attr('id'), 600) 
    }); 
}); 

더 좋은 방법이있을 것이라고 확신하지만 시작에 불과합니다.

Answer 2

당신은 알 수 있지만 .append() 및 .prepend() 메소드를 살펴보십시오.

코드 :

$('.innerwrapper').append($('.inner-slide').eq(0)); 

이 DIV "innerwrapper"의 마지막 위치 (! 복사 할) 첫 번째 슬라이드를 이동합니다

$('.innerwrapper').prepend($('.inner-slide').eq(-1)); 

은 첫 번째 위치에 마지막 슬라이드를 이동합니다.

건배!