如何让这个'滑块'的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;}