cycle through images via jquery

Question

I have five divs on my page (#art #fashion, #self, #nightlife, #community). right now, when you mouseover them, they load page content into another container div (#flyer).

I would like the flyer content to cycle every 5 seconds or so.

So, instead of having to mouseover those 5 divs, it should just automatically go.

does that make sense?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript"> 
$(document).ready(function() { 
        $("#art").mouseover(function(){ $('#flyer').load($(this).attr("href") + ' #flyer'); return false; }); 
        $("#fashion").mouseover(function(){ $('#flyer').load($(this).attr("href") + ' #flyer'); return false; }); 
        $("#self").mouseover(function(){ $('#flyer').load($(this).attr("href") + ' #flyer'); return false; }); 
        $("#nightlife").mouseover(function(){ $('#flyer').load($(this).attr("href") + ' #flyer'); return false; }); 
        $("#community").mouseover(function(){ $('#flyer').load($(this).attr("href") + ' #flyer'); return false; }); 
}); 
</script> 

Answer 1

I like using a combination of jquery cycle (http://malsup.com/jquery/cycle/) for cycling content and jquery easing (http://gsgd.co.uk/sandbox/jquery/easing/) for some added animation effects to accomplish this

Answer 2

OK. figured it out after reading the cycle plugin docs.thanks

Answer 3

Another way would be to use the setInterval function like so...

$(document).ready(function() { 
    var sourceElements = $("#art,#fashion,#self,#nightlife,#community");
    var pointer = 0;
    setInterval(function() {
        $('#flyer').load($(sourceElements[pointer++]).attr("href") + ' #flyer');
        if (!sourceElements[pointer]) pointer = 0;
    , 5000}); 
});