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按键很好地工作。我的animate（）回调重复是缓慢的，越野车，只是很糟糕：/

我过度使用.stop（）也看起来像一个潜在的问题>。 <

任何想法？

Answer 1

只是想的东西：你可以尝试定位内格（一个由$('#products div')与position: relative;获得和li s的position: absolute此外，内部的div必须overflow: hidden（可能已经是这样了）的职位列表项目现在是相对于周围的div，这使得计算更容易。

然后，而不是整体移动div，单独移动图像您可以检查是否可以通过类似的东西看到实例：

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

你仍然必须弄清楚什么时候重新安排个别项目，但也许这有助于你开始。也许你将不得不维护一个单独的数据结构，在那里你可以在必要时重新排序项目，或者至少保持指向当前（最左）和最右项目的指针（leftmost和rightmost）。