Adding some delay in an recursive loop and breaking out of it on mouseover
- by Moak
I have created a loop
function loopThem(){
    $$('#main-nav a').each(function(i, n) {
        i.up("#main-nav").down("li.active").removeClassName("active");
        i.up("li").addClassName("active");
        var target = i.readAttribute("href");
        i.up(".home-top").down("li.visible").removeClassName("visible");
        i.up(".home-top").down(target).addClassName("visible");
    });
    loopThem();
}
This function is called when the dom is loaded
document.observe("dom:loaded", function() {
     loopThem();
});
It does what I want as far as rotating through a set of banners, however it does so at light speed
How Can I
A add a delay between the changing?
B stop the loop from continuing once I mouse over?