jquery自定義滑塊 - 自動動畫幻燈片

Question

我創建了一個jQuery滑塊。單擊next或back按鈕.animate函數用於顯示下一個列表項。下一個和上一個按鈕都在工作，但現在我希望幻燈片在每x次後自動生成動畫。我無法弄清楚jQuery超時函數的工作原理。

current = 0; 
current_slide=1; 
$(document).ready(function(){ 
    width=951; 
    var totalSlides=$(".slider ul li").length; 
    $(".slider ul").removeAttr('width'); 
    $(".slider ul").attr('width',width*totalSlides); 

    $('#next img').click(function(){ 
     current_slide++; 
     current -= width; 
     if(current_slide>totalSlides) 
      { 
       current=0; 
       current_slide=1; 
       //$(".slider ul").css('left',(totalSlides)*width); 
       $(".slider ul").animate({"left":current+"px"}, "fast"); 
      } 
     else 
      $(".slider ul").animate({"left":current+"px"}, "slow"); 
    }); 

    $('#prev img').click(function(){ 
     current_slide--; 
     current += width; 
     if (current_slide < 1) 
      { 
       current = (totalSlides-1)*(-width); 
       current_slide = totalSlides; 
       $(".slider ul").animate({"left":current+"px"}, "fast"); 
      } 
     else 
      $(".slider ul").animate({"left":current+"px"}, "slow"); 
    }); 
}); 

Answer 1

請嘗試以下方法 - 只要使用標準JavaScript的setTimeout：

current = 0; 
current_slide=1; 

function runTimer() { 
    $('#next img').trigger('click'); 
    var timeout = setTimeout("runTimer()",1000); 
    } 

$(document).ready(function(){ 
    width=951; 
    var totalSlides=$(".slider ul li").length; 
    $(".slider ul").removeAttr('width'); 
    $(".slider ul").attr('width',width*totalSlides); 

    $('#next img').click(function(){ 
     current_slide++; 
     current -= width; 
     if(current_slide>totalSlides) 
      { 
       current=0; 
       current_slide=1; 
       //$(".slider ul").css('left',(totalSlides)*width); 
       $(".slider ul").animate({"left":current+"px"}, "fast"); 
      } 
     else 
      $(".slider ul").animate({"left":current+"px"}, "slow"); 
    }); 

    $('#prev img').click(function(){ 
     current_slide--; 
     current += width; 
     if (current_slide < 1) 
      { 
       current = (totalSlides-1)*(-width); 
       current_slide = totalSlides; 
       $(".slider ul").animate({"left":current+"px"}, "fast"); 
      } 
     else 
      $(".slider ul").animate({"left":current+"px"}, "slow"); 
    }); 

    var timeout = setTimeout("runTimer()",1000); 
}); 

Answer 2

我無法弄清楚 超時功能如何jQuery的原理。

只需使用的setTimeout