jQuery幻燈片插件中的動畫幻燈片。最後一張幻燈片不會回到第一個

Question

我有一個人爲我創建了一個jQuery插件。基本上，這是slideshow內5個不同的幻燈片。它工作正常，除了一件事。一旦最後一張幻燈片完成，它就停止。我需要它回到第一張幻燈片。有人可以看看他的代碼，看看他們是否可以幫忙弄清楚嗎？謝謝。

<div id="slides"> 
        <div class="slider" id="category0"> 
         <a class="button prev" href="#" rel="nofollow"><img src="images/slidePrev.png"/></a> 
         <a class="button next" href="#" rel="nofollow"><img src="images/slideNext.png"/></a> 
         <div class="holder_cont"> 
          <ul class="holder"> 
           <li class="slide first"> 
           </li> 
           <li class="slide"> 
           </li> 
           <li class="slide"> 
           </li> 
           <li class="slide"> 
           </li>       
          </ul> 
         </div> 
         <div class="clear"></div>        
        </div> 

<script> 
;(function($) { 
$.preloadImages = function(images, func) {   
    var i = 0; 
    var cache = []; 
    var loaded = 0; 
    var num = images.length; 

    for (; i < num; i++) (function(i) { 
     var new_image = $('<img/>').attr('src', images[i]).load(function(){ 
      loaded++; 

      if(loaded == num) 
      {             
       func();     
      } 
     });      
     cache.push(new_image); 
    })(i); 

    return true; 
}; 

$.fn.imgSlider = function(images) {   
    if (!$(this).length || $(this).length>1) {    
     return this; 
    } 

    var direction = 'right'; 
    var e = this; 
    var timeout_id = 0; 
    var in_progress = false 
    var i = 0; 
    var num_slides = $(e).find('.holder > li').length; 
    var slide_widths = $(e).find('.holder > li:first').width(); 
    var speed = 900; 
    var current=0; 

    for (; i < num_slides; i++) (function(i) {    
     $(e).find('.holder > li').eq(i).css('background', 'url('+images[i]+') no-repeat'); 
    })(i); 

    function slider_animate(to) 
    { 
     clearTimeout(timeout_id); 
     timeout_id = setTimeout(auto_animate, 5000); 
     in_progress = true;    

     var toMove = $(e).find('.holder'); 
     current = to; 

     $(toMove).animate({'margin-left':'-'+(slide_widths*to)+'px'}, speed, null, function(){     
      in_progress = false; 
     });   
    } 

    $(e).find('.holder > li').hover(function(){ 
     clearTimeout(timeout_id);    
     $(this).find('.caption').stop().fadeTo(500, 0.8);    
    },function(){ 
     $(this).find('.caption').stop().fadeTo(500, 0);    
     timeout_id = setTimeout(auto_animate, 3500);    
    }); 

    function auto_animate() 
    { 

     if (current === num_slides-1) { 
      var foo = $('.slider:not(.hidden)').attr('id'); 
      if ($(e).attr('id') === foo) { 
       if ($('#category'+(parseInt(foo.slice(8))+1)).length) { 
        window.startSlider(parseInt(foo.slice(8))+1); 
       } 
      } 
     } 

     if(direction == 'right') 
     { 
      var to = current+1; 
      if(to<num_slides) 
      { 

       slider_animate(to); 
      } 
     } 
     else 
     { 
      var to = current-1; 
      if(to>=0) 
      { 
       slider_animate(to); 
      } 
      else 
      { 
       var foo = $('.slider:not(.hidden)').attr('id'); 
       if ($(e).attr('id') === foo) { 
        if ($('#category'+parseInt(foo.slice(8))+1).length) { 
         window.startSlider(parseInt(foo.slice(8))+1); 
        } 
       } 
      } 
     } 
    } 

    $(e).find('.next').live('click', function(){ 
     if(!in_progress) 
     { 
      var to = current+1; 

      if (current === num_slides-1) { 

       var foo = $('.slider:not(.hidden)').attr('id'); 
       if ($(e).attr('id') === foo) { 
        var bar = '#category' + (parseInt(foo.slice(8))+1); 
        if ($(bar).length) { 
         window.startSlider(parseInt(foo.slice(8))+1); 
        } 
       } 
      } 
      if(to<num_slides) 
      { 
       slider_animate(to); 
      } 
      else 
      { 
       slider_animate(0); 
      } 
     } 

     return false; 
    }); 

    $(e).find('.prev').live('click', function(){ 
     if(!in_progress) 
     { 
      var to = current-1; 

      if (current === num_slides-1) { 
       var foo = $('.slider:not(.hidden)').attr('id'); 
       if ($(e).attr('id') === foo) { 
        if ($('#category'+parseInt(foo.slice(8))+1).length) { 
         window.startSlider(parseInt(foo.slice(8))+1); 
        } 
       } 
      } 

      if(to>=0) 
      { 
       slider_animate(to); 
      } 
      else 
      { 
       slider_animate(num_slides-1); 

      } 
     } 

     return false; 
    }); 

    timeout_id = setTimeout(auto_animate, 3000); 

    return true; 
}; 
})(jQuery); 
</script> 

Answer 1

未經測試，但您似乎需要在if(...) { window.startSlider }零件中進行更改。例如：

if (...) { 
    window.startSlider(...); 
} else { 
    window.startSlider(0); 
} 

看來，如果不執行if聲明，你的幻燈片將停止;如果是，它會移動到下一個幻燈片。所以else應該在沒有更多的幻燈片可以通過時執行，並從頭開始。

我可能讀錯了;沒有一個可行的例子很難說（jsfiddle對此很有用）。希望這有助於= ^。^ =

Answer 2

我認爲改變代碼：$.fn.imgSlider > function auto_animate() > if(direction == 'right'){}以下內容可能會有所幫助：

var to = current+1; 
if(to<num_slides){ 
    slider_animate(to); 
} 
else{ 
    slider_animate(0); 
} 

如果我解釋我自己好了，你現在只補充說else{}子句的代碼。