Как я могу автоматизировать это fadeIn, чтобы стать слайд-шоу?

Question

У меня есть следующий код, который автоматизирует слайд-шоу между различными слайдами, как показано на рисунке.

Это теперь производит fadeIn всякий раз, когда я нажимаю на цифры, показанные на рис., Но я бы хотел автоматизировать переход между 1 и 5 и когда 5 снова вернутся к 1 на таймере.

скриншоте:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/JavaScript"> 
$(document).ready(function(){ 
    $('#button a').click(function(){ 
     var integer = $(this).attr('rel'); 
     $('#myslide .cover').css({left:-960*(parseInt(integer)-1)}).hide().fadeIn(); 
     $('#button a').each(function(){ 
     $(this).removeClass('active'); 
      if($(this).hasClass('button'+integer)){ 
       $(this).addClass('active')} 
     }); 
    });  
}); 
</script> 

Answer 1

Далее предполагается, что вы будете удалить кнопки с цифрами, и что ваши слайды пронумерованы от 1 до 5.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/JavaScript"> 
$(document).ready(function(){ 
    function showSlide(integer) { 
     $('#myslide .cover').css({left:-960*(integer-1)}).hide().fadeIn(); 
     $('#button a').each(function(){ 
     $(this).removeClass('active'); 
      if($(this).hasClass('button'+integer)){ 
       $(this).addClass('active')} 
     }); 
     setTimeout(function() {showSlide((integer % 5) + 1);}, 5000); 
    } 
    showSlide(1); 
}); 
</script> 

Answer 2

Хмм попробовать что-то по линиям

$(document).ready(function(){ 
    Slider = { 
     current : 1; 
     Init : function(after_user_click) 
     { 
      tm = after_user_click ? 6000 : 3000; 
      setTimeout(function(){ 
       Slider.Change(); 
       Slider.Init(); //Restart the init process. 
      },tm) 
     }, 
     Change : function() 
     { 
      if(this.current == 5) 
      { 
       $("#button a[rel='1']").click(); //Click the first 
      }else 
      { 
       $("#button a[rel='"+(this.current+1)+"']").click(); //Click the first 
      } 
     } 
    } 

    $('#button a').click(function(){ 
     var integer = $(this).attr('rel'); 
     $('#myslide .cover').css({left:-960*(parseInt(integer)-1)}).hide().fadeIn(); 
     Slider.Init(true); 
     $('#button a').each(function(){ 
     $(this).removeClass('active'); 
      if($(this).hasClass('button'+integer)){ 
       $(this).addClass('active')} 
     }); 
    }); 

    //Start the slider. 
    Slider.Init(); 
}); 

Примечание: Это непроверено и на верхушке моей головы!

Answer 3

Решение по sje397 будет работать - вот альтернатива, которая будет использовать функцию обратного вызова после того, как нарастающий в

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/JavaScript"> 
$(document).ready(function(){ 
    function showSlide(integer) { 
     $('#myslide .cover').css({left:-960*(integer-1)}).hide().fadeIn(function() { 
      showSlide((integer % 5) + 1); 
     }); 
     $('#button a').removeClass('active'); 
     $('#button a.button' + integer).addClass('active'); 
    } 
    showSlide(1); 
}); 
</script>