jQuery傳送帶不重複

Question

我想爲我的網站創建一個傳送帶，並且無法將幻燈片移動到列表的後面，因此它是連續的流，沒有空白。下面是代碼：

<div class="maskleft"></div> 
<div class="maskright"></div> 

<div class="slideshow"> 
    <div class="views-row views-row-1 views-row-odd views-row-first"> 
     <div class="panel-text">text</div> 
     <div class="views-field views-field-field-image-feature"> 
      <img typeof="foaf:Image" src="" alt="" /> 
     </div> 
     <img typeof="foaf:Image" src="" alt="" /> 
    </div> 

    <div class="views-row views-row-2 views-row-even"> 
     <div class="panel-text">text</div> 
     <div class="views-field views-field-field-image-feature"> 
      <img typeof="foaf:Image" src="" alt="" /> 
     </div> 
     <img typeof="foaf:Image" src="" alt="" /> 
    </div> 

    <div class="views-row views-row-3 views-row-odd"> 
     <div class="panel-text">text</div> 
     <div class="views-field views-field-field-image-feature"> 
      <img typeof="foaf:Image" src="" alt="" /> 
     </div> 
     <img typeof="foaf:Image" src="" alt="" /> 
    </div> 

    <div class="views-row views-row-4 views-row-even views-row-last"> 
     <div class="panel-text">text</div> 
     <div class="views-field views-field-field-image-feature"> 
      <img typeof="foaf:Image" src="" alt="" /> 
     </div> 
     <img typeof="foaf:Image" src="" alt="" /> 
    </div> 
</div> 

jQuery的是：

function slideChange() { 
    var $slider = $('.slideshow'); 

    var $next = $slider.next().length ? $slider.next() : $('.slideshow'); 

    $next.animate({marginLeft: '-=1024'}, 1000, function() { 
    }); 
} 

$(document).ready(function() { 
    setInterval("slideChange()", 5000); 
}); 

實況開發站點是在這裏：http://dev.shoeboxdesign.co.uk/

Answer 1

1. 你只有一個div whitch是移動的，你爲什麼需要此代碼：

   var $next = $slider.next().length ? $slider.next() : $('.slideshow'); 
   

2. 你需要，當你達到你的幻燈片結束重置marginLeft風格：

   if (... check the end of slideshow ...) { // could be calculation of the widht, count of slides, etc. 
       $slider.css({marginLeft: '0'}); 
   } 
   

Answer 2

如果我得到你的權利，你要在第一張幻燈片添加到幻燈片演示的末尾，以便你有一個恆定的流而不是跳回到開始。 假設這是正確的，我們發現一個重要的關鍵字：追加。

您必須虛擬出第一張幻燈片並將其附加到最後一張幻燈片。每個動畫步驟都要做到這一點。我們結束了這樣的事情。

function slideChange() { 
    var $slider = $('.slideshow'); 
    var $first = $slider.first(); 

    $slider.append($first); // Append a copy of the first slide to the last one 
    $slider.animate({marginLeft: '-=1024'}, 1000, function() { 
     $first.remove(); // Remove the first slide we just copied. So we virtually swapped the slide from the first to the last place 
     $slider.css({marginLeft: '+=1024'}); // Reset the margin 
    }); 

} 

此解決方案未經測試，但應該做的伎倆。 但我仍然在代碼中看到一些問題。

是否僅對此滑塊使用此功能？如果你的答案是'是'，你應該確定給你的滑塊一個#id而不是一個.class選擇器。而且由於您不會再使用您的功能，因此不需要公共訪問功能。你可以匿名，這可以節省一些資源。

​​