interrupt a loop to start a .click event then restart the loop

I'll tell what I mean:

http://www.pixel3.it/marco/jslide/slide.html

I have this basic .click slideshow that slides trough every coloured box by pressing on the little squares below. 'Till now everything is good.

Now I really want to make the coloured boxes loop forever so I use this code:

$(document).ready(function runIt(){
    $('#slider').animate({marginLeft: "0"}, 500).delay(5000);
 开发者_开发技巧   $('#slider').animate({marginLeft: "-900"}, 500).delay(5000);
    $('#slider').animate({marginLeft: "-1800"}, 500).delay(5000);
    runIt;
});

It works good but I can't anymore switch through the boxes manually.

I was wondering if was possible to mix these two piece of code:

    $('#slider').animate({marginLeft: "0"}, 500).delay(5000);
    $('#slider').animate({marginLeft: "-900"}, 500).delay(5000);
    $('#slider').animate({marginLeft: "-1800"}, 500).delay(5000);
    runIt;
});

    $('a#but1').click(function(){
    $('#slider').animate({marginLeft: "0"}, 500)
    });

    $('a#but2').click(function(){
    $('#slider').animate({marginLeft: "-900"}, 500)
    });

    $('a#but3').click(function(){
    $('#slider').animate({marginLeft: "-1800"}, 500)
    });
});

making the boxes loop until i press one of the coloured squares, which does its .click event, and then restart the loop.

EDIT: I've tried to add .stop() to every .click event but doesn't work.

EDIT2 (almost solved): After a little search and with some luck I've found this plugin: http://flesler.blogspot.com/2007/10/jqueryscrollto.html I think this can help me aswell.

Right now using only that cycle plugin my code is:

$('#slider').cycle({fx: 'scrollLeft',
                speed:    500, 
                timeout:  5000});

    $('a#but1').click(function() { 
        $('#slider').cycle(0); 
        return false; 
    }); 

    $('a#but2').click(function() {  
        $('#slider').cycle(1);  
        return false;  
    }); 

    $('a#but3').click(function() { 
        $('#slider').cycle(2); 
        return false; 
    }); 


});

Sadly this plugin doesn't scroll trought ALL the frames but only the current and the next to come. I mean if I press the 3rd square when the slideshow is on the 1st box, during the animation the 2nd box is not considered. Hoping I'm right, because I've read the cycle plugin documentation and I didn't find any command to do so.

You maybe better served by something like jquery slideshow (http://jquery.malsup.com/cycle/)to deal with your transitions.

A loop like that might never allow for event management to occur, and might be responsible for why your click events do not seem to trigger. They may be waiting for the loop to complete before they would be handled. So in effect you have created an infinite loop and your events are qued waiting.