JIA Website Design & Web Development - search engine friendly - Los Angeles South Bay

Follow up with the tutorial in on-line class in Lynda.com - jQuery - Essential Training. Here is an example of creating a jQuery-based image rotator.

There are 31 pictures in size of 400px x300px and the speed is 0.4 seconds for each rotation.

jQuery is a free, powerful, open source javascript library. It simplifies the task of creating highly responsive web pages. It works across modern browsers. Abstracts away browser-specific features, allowing you to concentrate on design.

 
 
<script type="text/javascript">
        $(function() {
            // create the image rotator
            setInterval("rotateImages()", 400);
        });
 
        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 }, 100,
                function() {
                    oCurPhoto.removeClass('previous');
                });
        }
</script>
<style type="text/css">
#photoShow {
  width:400px; height:300px;
}
#photoShow div {
    position:absolute;
    z-index: 0;
}
#photoShow div.previous {
    z-index: 1;
}
#photoShow div.current {
    z-index: 2;
}
</style>
 
<div id="photoShow">
        <div class="current">
            <img src="images/cactus/cactus_01.gif"
               width="400" height="300" class="gallery" />
        </div>
        <div>
            <img src="images/cactus/cactus_02.gif" 
               width="400" height="300" class="gallery" />
        </div>
 
         ... 
     
    </div>