jQuery-based Image Rotator

After taking the tutorial classes in the online Lynda.com - jQuery - Essential Training (http://www NULL.lynda NULL.com/home/DisplayCourse NULL.aspx?lpk2=48370). 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 (http://jquery NULL.com/) is a free, powerful, open source […]

After taking the tutorial classes in the online Lynda.com - jQuery - Essential Training (http://www NULL.lynda NULL.com/home/DisplayCourse NULL.aspx?lpk2=48370). 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-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator

jQuery (http://jquery NULL.com/) 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 language="javascript" type="text/javascript" src="jquery-1.4.4.min.js"></script>
<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>
Tagged with:
 

Comments are closed.



Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Visit our friends!

A few highly recommended friends...