How could I automate this fadeIn to become a slideshow?

Question

Hi,

I have the following code that automates a slideshow between the different slides as shown in the picture.

This is now producing a fadeIn whenever I click on the numbers shown on the pic, but I'd like to automate the transition betweeh 1 to 5 and when on 5 return to 1 again on a timed maner.

The screenshot is:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
<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

The following assumes you will remove the number buttons, and that your slides are numbered 1 to 5.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
<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

Hmm try something along the lines of

$(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();
});

Note: This is untested and of the top of my head!

Answer 3

Solution by sje397 will work - here's alternative that will use callback function after fade-in

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
<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>