I got a request to rig a very simple website, not much bells and whistles. We needed a nice and simple menu system that was easily done with css, a contact form with PHPMailer and and image rotator for the landing page.

I decided that jQuery was probably the way to implement this, so make sure you include jQuery in your project. jQuery is great for its simple and powerful syntax, so in matter 10 minutes the image rotator was created. Here is how I did it.

First I layed out the html to have some elements to work with:

<div id="imageRotator">
    <div class="current">
        <img src="images/home01.jpg" width="941" height="510">
    </div>
    <div>
        <img src="images/home02.jpg" width="941" height="510">
    </div>
</div>

The code created two <div> tags inside another <div>, the inner divs is where the <img> are going to be contained. Note that one of them has the class “current” assigned to it, that is the image that will be visible and top most after we write the css for it.

Then the css:

<style type="text/css">
    #imageRotator {
        position: relative;
        width: 960px;
        height: 510px;
    }

    #imageRotator div {
        position: absolute;
        z-index: 0;
    }

     #imageRotator div.previous {
         z-index: 1;
    }

    #imageRotator div.current {
         z-index: 2;
    }
</style>

The css is pretty self explanatory here. First the divs containing the <img> tags are set to a position of “absolute” to make them stack on top of each other. #imageRotator and its child divs can be styled in any way you see fit. The trick is done by defining #imageRotator div.previous and imageRotator div.next. One is applied to any div inside #imageRotator with class “previous” in it and the other one is assigned to any div inside #imageRotator with class “current“. The previous has a z-index of 1 and the current has a z-index of 2 hence positioning “current” on top of “previous” for visibility. The rest is up to jQuery.

Then the javascript:

<script type="text/javascript">
    $("document").ready(function(){
        setInterval("rotate()", 5000);
    });

    function rotate() {

        var curSlide = $("#imageRotator div.current");
        var nextSlide = curSlide.next();
        var fadeTime = 1000;

        if (nextSlide.length == 0) {
            nextSlide = $("#imageRotator div:first");
        };

        curSlide.removeClass('current').addClass('previous');
        nextSlide.css({opacity: 0.0}).addClass("current").animate({opacity: 1.0}, fadeTime,

        function() {
            curSlide.removeClass('previous');
        }
    )}
</script>

The javascript defines three variables, curSlide which holds the visible div, nextSlide that holds the upcoming div and fadeTime that is the fade time between slides (not the pause).

With the “if” statement we check to see if we reached the end of the divs, that is we are at the last div inside the “imageRotator” div. If it is the last and there is no next then we set nextSlide to point back to the first div. Then simply remove “current” from curSlide and add “current” to nextSlide with a bit of animated opacity. See jQuery documentation for this.

Then all we have to do is call the rotate() function when the documet loads at regular intervals using the javascript function setInterval() which takes a the name of the callback function, in this case “rotate()” and the interval in milliseconds, in this case 5000.

    $("document").ready(function(){
        setInterval("rotate()", 5000); // This is the speed for the image rotator in milliseconds
    });