JavaScript/jQuery를 사용하여 원활한 무한 루프 이미지 슬라이더를 얻는 방법은 무엇입니까?

JavaScript/jQuery를 사용한 무한 루프 슬라이더 디자인 개념

최적의 코드 가독성, 유지 관리 용이성 및 재사용성을 갖춘 무한 루프 이미지 슬라이더를 만들려면, 다음 청사진을 고려하십시오.

무한 루프 효과를 위한 이미지 배열

무한 루프의 환상을 얻으려면 두 가지 접근 방식 중 하나를 구현하세요.

• z-색인 변경: 다음 또는 이전 이미지가 표시되면 각 이미지의 z-색인을 조정합니다.
• DOM 위치 수정: 이미지 이동 DOM 내에서 스크롤 또는 반복 모양을 생성합니다.

원활한 반복을 위한 이미지 복제

무한 루프를 생성하려면 첫 번째 이미지와 마지막 이미지를 복제합니다. 순서대로. 그런 다음 스크롤하는 동안:

• 이미지 n에서 이미지 1로 전환할 때 애니메이션이 완료된 직후 컨테이너를 실제 첫 번째 이미지의 오프셋으로 이동합니다.
• 이미지 1에서 이미지 1로 전환할 때 image n의 경우, 애니메이션이 완료된 직후 컨테이너를 실제 n번째 이미지의 오프셋으로 이동합니다.

예제 코드

다음 JavaScript/jQuery 코드 조각을 다음과 같이 고려하세요. 구현 예:

$(function() {
 
  var gallery = $('#gallery ul'),
      items   = gallery.find('li'),
      len     = items.length,
      current = 1,  /* the item we're currently looking */
      
      first   = items.filter(':first'),
      last    = items.filter(':last'),
      
      triggers = $('button');
  
  /* 1. Cloning first and last item */
  first.before(last.clone(true)); 
  last.after(first.clone(true)); 
  
  /* 2. Set button handlers */
  triggers.on('click', function() {

    var cycle, delta;
    
    if (gallery.is(':not(:animated)')) {
     
        cycle = false;
        delta = (this.id === "prev")? -1 : 1;
        /* in the example buttons have id "prev" or "next" */  
    
        gallery.animate({ left: "+=" + (-100 * delta) }, function() {
      
            current += delta;
       
            /** 
             * we're cycling the slider when the the value of "current" 
             * variable (after increment/decrement) is 0 or when it exceeds
             * the initial gallery length
             */          
            cycle = (current === 0 || current > len);
       
            if (cycle) {
                /* we switched from image 1 to 4-cloned or 
                   from image 4 to 1-cloned */
                current = (current === 0)? len : 1; 
                gallery.css({left:  -100 * current });
            }
        });   
     }
    
  });
});

위 내용은 JavaScript/jQuery를 사용하여 원활한 무한 루프 이미지 슬라이더를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!