JQuery Image Rotator

I had to create a simple image rotator for a client with static text over the image. So I am throwing it up here in case anyone else needed it.

You will need JQuery for this. You can download it here.

<script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript">// <![CDATA[
$(function(){
var $container = $('#images'); //ID to your containing DIV
var i = 1;
var scrollInterval = setInterval(function(){
var currentClass = 'img'+i;
if(i >= 4){//Number of images +1
i = 0;
}

var ii = i+1;
var nextClass = 'img'+ii;
$container.removeClass(currentClass);
$container.fadeIn().addClass( nextClass);
i++;

},5000); //Time Interval between fade
});
// ]]></script>

The code above is set to change the class name of the container.

<div id="images" class="img1">
<h1>Title Tag</h1>
</div>

Now you will need to create the CSS classes for the rotator.

.img1 {background:url(image1.gif) no-repeat;}
.img2 {background:url(image2.gif) no-repeat;}
.img3 {background:url(image3.gif) no-repeat;}

That is it. I wanted a quick and dirty rotator. This also minimizes the external JS files the page calls. I know there are many JQuery plugins to handle rotators, but I just wanted the library includes.

Enjoy!
Cheers!~