JavaScript/jQuery를 사용하여 무한 이미지 루프 슬라이더를 어떻게 만들 수 있나요?

무한대 루프 슬라이더 개념

이 문서에서는 Infinity-Image-Loop-을 구축하기 위한 가독성, 코드 재사용성 및 우수한 코딩 사례와 같은 모범 사례에 대해 설명합니다. JavaScript/jQuery를 사용하는 웹사이트용 슬라이더입니다. 끝없는 루프 슬라이더의 환상을 만들기 위해 사진을 배열하는 방법에 중점을 둡니다.

무한 루프 슬라이더 구현

무한 이미지 슬라이더를 만드는 간단한 방법 중 하나는 다음과 같습니다. 루프에서 슬라이드할 "n"개의 이미지가 있습니다. 첫 번째 이미지는 n번째 이미지 다음에 오며 그 반대의 경우도 마찬가지입니다. 첫 번째 이미지와 마지막 이미지의 복제본을 생성하고 다음을 수행합니다.

• 첫 번째 이미지 앞에 마지막 이미지의 복제본을 추가합니다.
• 첫 번째 이미지 뒤에 첫 번째 이미지의 복제본을 추가합니다. 마지막 이미지입니다.

이미지 수에 관계없이 최대 2개의 복제된 항목만 삽입하면 됩니다.

모든 이미지가 너비가 100px이고 오버플로가 있는 컨테이너 내에 표시된다고 가정합니다. Hidden, display: inline-block 및 white-space: nowrap을 사용하면 이미지를 담는 컨테이너를 한 줄로 쉽게 정렬할 수 있습니다.

n = 4인 경우 DOM 구조는 다음과 같습니다.

offset(px)     0       100     200     300     400     500
images         |   4c   |   1   |   2   |   3   |   4   |   1c
                                                   
/*                 ^^                                       ^^
       [ Clone of the last image ]              [ Clone of the 1st image ]
*/

처음에는 컨테이너가 왼쪽: -100px로 배치되어 첫 번째 이미지가 표시됩니다. 이미지 간에 전환하려면 원래 선택한 CSS 속성에 JavaScript 애니메이션을 적용하세요.

• 슬라이더가 4번째 이미지에 있을 때 이미지 1c로 이동하면 이미지 4에서 1c로 애니메이션이 적용됩니다. 애니메이션이 완료되면 첫 번째 이미지의 실제 오프셋에서 슬라이더 래퍼 위치를 즉시 변경합니다(예: 왼쪽으로 설정: 컨테이너에 -100px).
• 마찬가지로 슬라이더가 첫 번째 요소에 배치되면, 이미지 1에서 4c까지 이전 애니메이션을 수행하고 컨테이너를 4번째 이미지 오프셋(왼쪽: 컨테이너까지 -400px)으로 이동하면 이전 이미지를 표시하기에 충분합니다.

슬라이드 루프 조정

함께 제공되는 바이올린이 이 효과를 보여줍니다. 다음은 사용된 기본 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 });
            }
        });   
     }
    
  });
});

결론

이 솔루션은 상대적으로 간단하고 효율적이며, 비 솔루션에 비해 두 개의 추가 DOM 삽입 작업과 간단한 루프 관리 로직만 필요합니다. -루핑 슬라이더.

대체 접근 방식이 있을 수 있지만 이 방법은 무한 루프 슬라이더를 생성하기 위한 실용적이고 효과적인 솔루션을 제공합니다.

위 내용은 JavaScript/jQuery를 사용하여 무한 이미지 루프 슬라이더를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!