There may be an easier way to do this - but given the following html:

<div class="rotate">
  <div><img /></div>
  <div><img /></div>
  <div><img /></div>
</div>

You can use the following code snippet to rotate through the images using jquery. You’ll need to set the rotate to be relatively positioned, and absolutely position the divs inside the .rotate div.

$(’div.rotate div’).hide().eq(1).show();
function rotate(){
var i = $(’div.rotate div:visible’).prevAll(’div’).length + 1;
i = i % $(’div.rotate div’).length;
$(’div.rotate div’).fadeOut().eq(i).fadeIn();
setTimeout(’rotate()’, 1000);
};
rotate();

Enjoy! Up with code snippets and down with unnecessary plugins!

This entry was posted on Monday, December 21st, 2009 at 12:30 am and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.