如何讓這個'滑塊'的JavaScript無限旋轉圖像？

Question

我試圖幫助一位朋友，他的主頁上有一個旋轉窗格，圖片不會在無限循環上滾動。他們滾動瀏覽，然後回滾到開頭，然後重新開始。

這裏是JavaScript片段，他提供的：

$(function() { 
    if ($('#customScroller').length != 0) { //check if we're on the right page 
     var width = $('#slider a').length; 
     $('#slider').width(width * 930); //give the slider the appropriate width 
     var count = 0; 
     initial slide position 

     function slide() { 
      if (count < (width - 1)) { //we want to check if at end of the slider 
       count++; 
      } 
      else { 
       count = 0; 
      } 
      var toMove = 0; 
      toMove = (-1 * (count * 930)); 
      $('#slider').animate({ 
       left: toMove 
      }, 1000, function() { 
       //complete 
      }); 
     } 
     var s = window.setInterval(slide, 8500); 
    } 
}); 

多少工作是把它簡單地循環轉換無限？

編輯：這裏是網站：http://www.ralphshardwood.com

Answer 1

你會希望以不同appraoch這一點。爲了達到您想要的效果，您需要將幻燈片從容器的右邊緣絕對放置，並從左邊開始爲下一個幻燈片設置動畫，以確保它具有更高的Z-index（而不是移動整個列表， 。您的訂單

你可以得到下面的要點，並可以藉此到您現有的標記這裏是一個工作的jsfiddle：http://jsfiddle.net/rgthree/mGeqx/

if ($('#slides').length != 0) { 
    var currentIndex = 0, slides = $('#slides > li'); 
    $(slides[currentIndex]).css('left','0%'); 
    function slide() { 
     var current, next; 
     current = $(slides[currentIndex]); 
     currentIndex++; 
     if(currentIndex === slides.length){ 
      currentIndex = 0; 
     } 
     next = $(slides[currentIndex]); 
     next.css('left','100%'); 
     next.css('z-index',parseInt(current.css('z-index'), 10)+1); 
     next.animate({left: '0%'}, 1000); 
    } 
    var s = window.setInterval(slide, 2000); 
} 

標記：

<ul id="slides"> 
    <li>Slide1</li> 
    <li>Slide2</li> 
    <li>Slide3</li> 
    <li>Slide4</li> 
    <li>Slide5</li> 
</ul>​ 

CSS：

ul#slides {position:relative; width:400px; height:200px; overflow:hidden;} 
ul#slides > li { 
    position:absolute; 
    top:0px; 
    left:100%; 
    width:100%; 
    height:100%; 
    background:#777; 
    color:#FFF; 
    z-index:1; 
} 

ul#slides > li:nth-child(even) {background:#444;}