如何停止我的jQuery Infinite Carousel中的最後一張圖像消失？

我使用這個jQuery Infinite Carousel，但與演示略有不同，您可以在標題爲「客戶成功案例」下看到我的用法here。如何停止我的jQuery Infinite Carousel中的最後一張圖像消失？

正如你所看到的，我已經將旋轉木馬居中並允許前一張圖像在旋轉木馬滾動時仍然可見。當輪播首次加載時，序列中的最後一個圖像不會加載，因此第一個圖像的左側有一個空白區域。傳送帶返回到第一張圖像後，最後一張圖像也會短暫消失。

我試圖解決這個很多次我自己，但我的jQuery知識缺乏，腳本只是停止響應，有誰知道我怎麼可以得到序列中的最後一張圖片，以顯示何時輪播加載，而不是消失時它又重新開始了嗎？謝謝。

這裏是jQuery腳本：

/** 
* @author Stéphane Roucheray 
* @extends jquery 
*/ 


jQuery.fn.carousel = function(previous, next, options){ 
    var sliderList = jQuery(this).children()[0]; 

    if (sliderList) { 
     var increment = jQuery(sliderList).children().outerWidth("true"), 
     elmnts = jQuery(sliderList).children(), 
     numElmts = elmnts.length, 
     sizeFirstElmnt = increment, 
     shownInViewport = Math.round(jQuery(this).width()/sizeFirstElmnt), 
     firstElementOnViewPort = 1, 
     isAnimating = false; 

     for (i = 0; i < shownInViewport; i++) { 
      jQuery(sliderList).css('width',(numElmts+shownInViewport)*increment + increment + "px"); 
      jQuery(sliderList).append(jQuery(elmnts[i]).clone()); 
     } 

     jQuery(previous).click(function(event){ 
      if (!isAnimating) { 
       if (firstElementOnViewPort == 1) { 
        jQuery(sliderList).css('left', "-" + numElmts * sizeFirstElmnt + "px"); 
        firstElementOnViewPort = numElmts; 
       } 
       else { 
        firstElementOnViewPort--; 
       } 

       jQuery(sliderList).animate({ 
        left: "+=" + increment, 
        y: 0, 
        queue: true 
       }, "swing", function(){isAnimating = false;}); 
       isAnimating = true; 
      } 

     }); 

     jQuery(next).click(function(event){ 
      if (!isAnimating) { 
       if (firstElementOnViewPort > numElmts) { 
        firstElementOnViewPort = 2; 
        jQuery(sliderList).css('left', "0px"); 
       } 
       else { 
        firstElementOnViewPort++; 
       } 
       jQuery(sliderList).animate({ 
        left: "-=" + increment, 
        y: 0, 
        queue: true 
       }, "swing", function(){isAnimating = false;}); 
       isAnimating = true; 
      } 
     }); 
    } 
};

來源

2012-04-13 remondo

這個插件旨在儘可能自動，因而很少有選擇。我認爲只有通過修改你的CSS才能達到你想要的效果。 #customersCarousel必須與3個項目一樣大，並且如果其左邊沒有被漸變部分隱藏，則將其定位在第一個元素左邊緣所期望的位置。這第一個項目將成爲名單上的第一個項目。擺脫#customersCarouselList的右邊距（這可能與自動尺寸和定位處理相沖突）。然後更改您的漸變圖像以隱藏第一個項目的左側和第三個項目的右側。希望得到這個幫助。

來源

2012-04-16 20:08:29 sroucheray

謝謝，我認爲你是腳本的作者？你是正確的，保證金影響最後的形象。我參加了一些事情，但現在第二個圖像消失了。我沒有時間去處理它，所以這將不得不做。 – remondo 2012-04-17 14:09:27

如何停止我的jQuery Infinite Carousel中的最後一張圖像消失？

回答

相關問題