Changing Classes on a Timer Jquery

Question

Hello,

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

Answer 1

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;