Automatically Cycle through hidden divs

I've got a working version of my code here: http://www.jsfiddle.net/brianrhea/5Hqs3/1/

When I hover over a link, it displays a hidden div in another area of the page exactly as I would like it to.

My question is how could I automatically cycle through the hidden divs if the user didn't hover over them, but then would still allow for the "hover" interaction.

Working version at the jsfiddle above, here is the code if you'd prefer.

<a class="sliderLinks" 开发者_如何学编程data-id="billing" href="#">Billing Reminders</a><br />
<a class="sliderLinks" data-id="collections" href="#">Collections</a><br />
<a class="sliderLinks" data-id="payments" href="#">Payments</a>
<br /><br />

<div id="defaultMessage">
Default Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>

<div id="textMessages">

<div class="hidden" id="billing">
Billing ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id ligula eget purus</div>

<div class="hidden" id="collections">
Collections Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>

<div class="hidden" id="payments">
Payments orem ipsum dolor sit amet, consectetur adipiscing elit
</div>

</div>

Javascript

 $(document).ready(function(){
         $(".sliderLinks").hover(
              function(){
                  var id = $(this).data("id");
                  if(id!==undefined){
                   $("#" + id).fadeIn(500);
                  }
                  $("#textMessages").fadeIn(500);
                  $("#defaultMessage").hide();

              },function(){
                  $("#textMessages").hide();
                  $(".hidden").hide();
                  $("#defaultMessage").fadeIn(500);  
              });
      });

---

Use setTimeout to call the advance function. When the timeout is called, set the timeout again for the next item.

If a user hovers over an item, use clearTimeout to remove the current timeout. When the user leaves the items, start a new timeout.

Update:

Using your original HTML, I cobbled this together. It isn't perfect but it is basically what you asked for:

$(document).ready(function(){
   var dispID = new Array("billing", "collections", "payments");
   var dispCounter = 0;
   var timer = setTimeout(iterate, 1000);

   function iterate() {
       $("#defaultMessage").hide();  
       $("#" + dispID[dispCounter]).fadeOut(500, function() {
           if (++dispCounter == dispID.length) dispCounter = 0;
           $("#" + dispID[dispCounter]).fadeIn(500);

           timer = setTimeout(iterate, 1000);
       });
   } 

   $(".sliderLinks").hover(function() {
       clearTimeout(timer);
       var id = $(this).data("id");
        if (id != null) {
            $("#" + id).siblings().fadeOut(500, function() {
               $("#" + id).fadeIn(500); 
            });
        }
    }, function() {
        timer = setTimeout(iterate, 1000);
    });
});

---

I forked your code and corrected here http://www.jsfiddle.net/sTWCg/4/