jQuery 이미지 캐 러셀 - 어떻게 이미지를 반복 할 수 있습니까?

Question

jQuery에서 마우스를 이미지 위로 가져 가면 위/아래로 속도가 빨라지는 이미지 슬라이드 쇼를 작성했습니다.

나는 슬라이드 쇼가 끝나는대로 이미지 '반복'을 가지고 싶습니다. 따라서 사용자가 슬라이드 쇼를 스크롤하면 이미지 LI의 끝 부분에 도달 한 다음 처음부터 원활하게 반복됩니다.

jQuery를

$(document).ready(function() 
{ 
    $('#products ul').css('width', ($('#products ul li').length * 185)); 

    var $products = $('#products div'); 
    var posLeft = 0; 

    // Add 5 DIV overlays to use as 'hover buttons' for the slideshow speed 
    for (i = 0; i <= 4; i++) 
    { 
     $('#products').append('<div class="hover-' + i + '" style="background: transparent; width: 100px; height: 167px; position: absolute; left: ' + posLeft + 'px; top: 15px;"></div>'); 
     posLeft += 100; 
    } 

    // Function animate the scrolling DIV in the appropriate direction with the set speed 
    function plz2scroll(direction, scrollSpeed) 
    { 
     var scrollDir = (direction == 'left') ? '-=' : '+='; 
     var scrollOffset = (direction == 'right') ? '-10' : '+' + $products.css('width').substring(0, -2) + 10; // Fix the '+100px10' issue - Seems substring don't support negative offsets 

     $products.animate({scrollLeft: scrollDir + $products.css('width')}, scrollSpeed, 'linear', function() 
     { 
     $products.scrollLeft(scrollOffset); 
     plz2scroll(direction, scrollSpeed); 
     }); 
    } 

    // Create the 'hover buttons' 
    $('div.hover-0').hover(function() { $products.stop(); plz2scroll('right', 2000); }); 
    $('div.hover-1').hover(function() { $products.stop(); plz2scroll('right', 3500); }); 
    $('div.hover-2').hover(function() { $products.stop(); }); 
    $('div.hover-3').hover(function() { $products.stop(); plz2scroll('left', 3500); }); 
    $('div.hover-4').hover(function() { $products.stop(); plz2scroll('left', 2000); }); 
}); 

HTML

<div id="products"> 
    <div> 
     <ul> 
     <li><img src="images/1.jpg" /></li> 
     <li><img src="images/2.jpg" /></li> 
     <li><img src="images/3.jpg" /></li> 
     <li><img src="images/4.jpg" /></li> 
     <li><img src="images/5.jpg" /></li> 
     </ul> 
    </div> 
</div> 

스크롤러 작품과 속도/방향이 오버레이 DIV 버튼으로 잘 작동 :

여기에 현재 코드입니다. > .stop의/

내 남용()도 잠재적 인 문제처럼 보이는 : 반복 내 애니메이션() 콜백이 느리고 버그 그냥 나쁘다. <

어떤 아이디어가?

Answer 1

뭔가 생각 :..의 당신은 내부 사업부 (position: absolute와 position: relative;와 $('#products div')하여 얻은 하나는 li의 위치를 ​​시도해 볼 수도 있습니다 또한, 내부 사업부는 아마 이미 경우 (overflow: hidden이 있어야합니다) 위치 목록 항목이 이제 주변 div에 상대적이어서 계산이 더 쉬워집니다.

그런 다음 div를 전체적으로 이동하는 대신 이미지를 개별적으로 이동합니다. 다음과 같이 항목이 표시되는지 확인할 수 있습니다. for 예 :

function isItemVisible(li) { 
    var w = li.outerWidth() 
    var pos = li.position(); 
    return pos.left + w > 0 && pos.left < $products.innerWidth(); 
} 

개별 항목을 언제 다시 배열해야 할지를 알아야하지만 어쩌면 시작하는 데 도움이 될 수 있습니다. 필요할 때 항목을 재정렬 할 수있는 별도의 데이터 구조를 유지하거나 적어도 (현재) 가장 왼쪽 및 오른쪽 항목에 대한 포인터를 leftmost 및 rightmost 포인터로 유지해야합니다.