Changing Classes on a Timer Jquery

I am creating an image banner which has rollover links which change the text and image. What I need to happen is for this to rotate every 5 seconds through the 5 images, but on mouseover it would pause the roation and take you to the image which the user has selected. My Mouseover code is:

$("#main_nav li").mouseover( function() {
    $(".navigation_main, .main_info").each (function() {
        $(this).removeClass("on").addClass("off");
                                    });
  开发者_运维知识库  $("#"+$(this).attr("id")).removeClass("off").addClass("on");
    $("#"+$(this).attr("id")+"_images").removeClass("off").addClass("on");
    $("#"+$(this).attr("id")+"_text").removeClass("off").addClass("on");
    $("#"+$(this).attr("id")+"_a").removeClass("off").addClass("on");
                             });

Any help on getting this to rotate would be great.

Many thanks

Here's how the cycle plugin for jQuery does it:

example: http://malsup.com/jquery/cycle/pagerHover.html

if the pause option is set, then hover increments a variable called cyclePause causing the slideshow not to rotate:

if (opts.pause)
    $cont.hover(function(){this.cyclePause++;},function(){this.cyclePause--;});

Later on cycle pause is checked. If it is, then there is no advancing.

case 'pause':
        cont.cyclePause = 1;
        return false;
    case 'resume':
        cont.cyclePause = 0;
        if (arg2 === true) { // resume now!
            options = $(cont).data('cycle.opts');
            if (!options) {
                log('options not found, can not resume');
                return false;
            }
            if (cont.cycleTimeout) {
                clearTimeout(cont.cycleTimeout);
                cont.cycleTimeout = 0;
            }
            go(options.elements, options, 1, 1);
        }
        return false;