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:
[html]
<!– 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-150×150.png" class="ssslides" />
<img src="http://www.devarticles.in/wp-content/uploads/2010/10/RSS-icon-150×150.png" class="ssslides" />
<img src="http://www.devarticles.in/wp-content/uploads/2010/10/facebook-150×150.png" class="ssslides" />
[/html]
Here’s the css code:
[css].ssslides{display:none;}[/css]
Here’s the javascript code:
[javascript]
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);
})
[/javascript]
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
[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>[/html]
CSS
[code].fadein { position:relative; width:500px; height:332px; }
.fadein img { position:absolute; left:0; top:0; }[/code]
and Javascript
[code]$(function(){
$(‘.fadein img:gt(0)’).hide();
setInterval(function(){
$(‘.fadein :first-child’).fadeOut()
.next(‘img’).fadeIn()
.end().appendTo(‘.fadein’);},
3000);
});[/code]