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圖像旋轉木馬 - 我如何重複圖像？

回答

相關問題