jquery image slider

jquery image slider
 jquery image slider basic slide image one by one  with the help of css animate tag using 
addClass() method.
<!DOCTYPE html>
<html>
<head>
    <title>jQuery Image Rotator</title>
    <script type="text/javascript" src="../jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(function() {
            // create the image rotator
            setInterval("rotateImages()", 2000);
        });

        function rotateImages() {
            var oCurPhoto = $('#photoShow div.current');
            var oNxtPhoto = oCurPhoto.next();
            if (oNxtPhoto.length == 0)
                oNxtPhoto = $('#photoShow div:first');

            oCurPhoto.removeClass('current').addClass('previous');
            oNxtPhoto.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 1000,
                function() {
                    oCurPhoto.removeClass('previous');
                });
        }
    </script>
<style type="text/css">
#photoShow {
    height:400px;
    width:400px;
}
#photoShow div {
    position:absolute;
    z-index: 0;
}
#photoShow div.previous {
    z-index: 1;
}
#photoShow div.current {
    z-index: 2;
}
</style>
</head>
<body>
    <h1>
        jQuery-based Image Rotator</h1>
    <div id="photoShow">
        <div class="current">
            <img src="images/Grass.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
        </div>
        <div>
            <img src="images/Leaf.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
        </div>
        <div>
            <img src="images/Spring.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
        </div>
        <div>
            <img src="images/Water.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
        </div>
    </div>
</body>
</html>