出現在我的輪播結束處的空白處

我已使用this script在我的網站here上創建無限輪播。它使用CSS進行了自定義，因此第一個和最後一個項目都會顯示一半。出現在我的輪播結束處的空白處

如果你不斷點擊右邊的箭頭，你最終會碰到一個空的空間。到目前爲止，我還沒有能夠解決這個問題。任何人都可以提供解決方案嗎？

下面是相關的腳本：

/** 
* @author Stéphane Roucheray 
* @extends jquery 
*/ 
jQuery.fn.simplecarousel = 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; 
      } 
     }); 
    } 
}; 

#home-carousel-container { 
    position: relative; 
} 
#home-carousel { 
    overflow: hidden; 
} 
#home-carousel ul { 
    margin-left: -143px; 
    padding: 0; 
    position: relative; 
} 
#home-carousel li { 
    float: left; 
    height: 645px; 
    list-style: none outside none; 
    margin: 0 3px; 
    width: 256px; 
}

enter image description here

來源

2013-03-04 farjam

是什麼，你已經加入到傳送帶上revelant改編（的JavaScript/CSS）？ – 2013-03-04 15:22:12

嘗試在您的問題包括代碼..以避免鏈接腐 – abbood 2013-03-04 15:30:45

添加了我使用的腳本 – farjam 2013-03-04 15:39:19

按我的意見。

您在旋轉木馬上設置了一個負左邊距，導致它隱藏了圖像的一半。因此，當您點擊下一個/上一個時，它會顯示圖像移動的位置以創建連續效果。

Witihin你的CSS，我改變

#home-carousel ul{ 
    position: relative; 
    padding: 0; 
    margin-left: -143px; 
}

到

#home-carousel ul{ 
    position: relative; 
    padding: 0; 
    margin-left: -3px; 
}

而且沒有出現任何問題都沒有。

Screenshot of the page with the modification - In Chrome

來源

2013-03-04 15:44:40 Gavin

但是，如果我刪除了負邊距，我會失去只有一半的第一張和最後一張圖像出現而不是整張圖像的效果。 :) – farjam 2013-03-04 15:50:04

旋轉木馬不是爲了做到這一點。通過使用負邊距，您顯示的是無法顯示的旋轉木馬區域，因此您正在獲得該效果。您可能需要修改創建輪播的JavaScript內使用的邏輯。 – Gavin 2013-03-04 16:01:03

出現在我的輪播結束處的空白處

回答

相關問題