jQuery-Image-Rotator

Simple image rotater with fadeIn fadeOut effect using jQuery

jQuery-Image-Rotator

One may find it useful for rotating images with fadeIn fadeOut effect using jQuery.

How it works?

It collects image elements grouped by class name and rotates them within an image element which is identified by element ID. For example i have placed an image elements here with ID ssrotator. It rotates images from a list of image elements grouped by class  ssslides.. Here’s the HTML code:

<!-- this image element acts as stage -->
<img id="ssrotator" src="" />

<!-- Following the list of images grouped by a class "ssslides" -->
<img src="http://www.devarticles.in/wp-content/uploads/2011/11/email-delegation_logo-150x150.png" class="ssslides" />
<img src="http://www.devarticles.in/wp-content/uploads/2010/10/RSS-icon-150x150.png" class="ssslides" />
<img src="http://www.devarticles.in/wp-content/uploads/2010/10/facebook-150x150.png" class="ssslides" />

New features in Gmail

Here’s the css code:

.ssslides{display:none;}

Here’s the javascript code:

var imgs = jQuery(".ssslides"); // images to be rotated	
var imgindex = 0;
jQuery("#ssrotator").attr('src', jQuery(imgs.get(1)).attr("src"));	
function rotateImages(ele)
{
	jQuery(ele).fadeOut('fast', function()
	{			
		jQuery(this).attr('src', jQuery(imgs.get(imgindex)).attr("src"));
		 
		jQuery(this).fadeIn('fast', function()
		{
			if (imgindex == imgs.length-1)
			{
				imgindex = 0;
			}
			else
			{
				imgindex++;
			}
		});
	});
}
jQuery(document).ready(function()	{
jQuery(".ssslides").hide(); //alternate way to hide, it can be done using css
setInterval ('rotateImages("#ssrotator")', 3000); 
})

One thought on “Simple image rotater with fadeIn fadeOut effect using jQuery

  1. Found even more-more precised and simplest method at Jonathan Snook’s blog with a demo. I am sure nothing can be more simpler than that.

    HTML

    <div class="fadein">
    <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
    <img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
    <img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
    </div>

    CSS

    .fadein { position:relative; width:500px; height:332px; }
    .fadein img { position:absolute; left:0; top:0; }

    and Javascript

    $(function(){
        $('.fadein img:gt(0)').hide();
        setInterval(function(){
          $('.fadein :first-child').fadeOut()
             .next('img').fadeIn()
             .end().appendTo('.fadein');}, 
          3000);
    });

Leave a Reply

Your email address will not be published. Required fields are marked *