jQuery图像旋转木马 - 我如何重复图像？

我在jQuery中编写了一个图像幻灯片，可以根据鼠标悬停在图像上的位置来加快/缩小。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（）也看起来像一个潜在的问题>。 <

任何想法？

来源

2010-02-24 dave

我没有对重复问题的答案，但我不认为你过度使用stop（），看起来不错。我想，'100px10'问题可以通过使用'innerWidth（）'和'outerWidth（）'来克服。 – 2010-02-24 04:23:17

我选择了'（parseInt（$ products.css（'width'）。replace（'px'，''））+ 10）;' – dave 2010-02-24 04:44:46

看起来像这个答案在[[帮助自动旋转无限jquery传送带。无法让轮播无限循环而不是“倒带”] [1]“可能有些用处。 [1]：http://stackoverflow.com/questions/3738640/help-with-auto-rotating-infinite-jquery-carousel-can-not-get-carousel-to-loop-in/ 3739493＃3739493 – bengusty 2011-09-07 20:20:40

只是想的东西：你可以尝试定位内格（一个由$('#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）。

来源

2010-02-24 04:35:57

这似乎相当可行...我会去看看会发生什么。感谢这个想法。 – dave 2010-02-24 04:47:05

jQuery图像旋转木马 - 我如何重复图像？

回答

相关问题