Web Design Blog » jQuery Scripts & Helpful Snippets »

Ajax JQuery – Rotating Image Script

I can’t remember for the life of me where I got this code from, but if I could, I’d give the author the credit. I didn’t write this code, but it’s something I wanted to share because it’s pretty cool.

There are HUNDREDS of image rotating scripts out there, but I like this one in particular because the code is light and it’s a lot smoother than a lot I’ve seen. Additionally, unlike a lot of the examples out there, this method doesn’t require a heavy jQuery extension. This is pure JQuery (and a tiny bit of CSS).

Here’s an example of what this code will do:

</p> <p>Your browser does not support iframes.</p> <p>

Here’s the code:

/*** set the width and height to match your images **/
 
#slideshow {
	position:relative;
	height:330px;
}
 
#slideshow img {
	position:absolute;
	top:0;
	left:0;
	z-index:8;
	opacity:0.0;
}
 
#slideshow img.active {
	z-index:10;
	opacity:1.0;
}
 
#slideshow img.last-active {
	z-index:9;
}
 
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript"> 
function slideSwitch() {
var $active = $('#slideshow .active');
if ( $active.length == 0 ) $active = $('#slideshow img:last');
	var $next =  $active.next().length ? $active.next()
	: $('#slideshow img:first');
 
	$active.addClass('last-active');
 
	$next.css({opacity: 0.0})
		.addClass('active')
    //adjust value to change the time taken to fade between images
		.animate({opacity: 1.0}, 3000, function() {
		$active.removeClass('active last-active');
	});
}
 
$(function() {
    //adjust value to change the interval between each image change
		setInterval( "slideSwitch()", 4000 );
});
</script>  
 
<div id="slideshow">
  <!-- the active class is for the image you want to show on page load --> 
	<img src="images/rotate/1.jpg" class="active" alt="" title="" /> 
	<img src="images/rotate/2.jpg" alt="" title="" /> 
	<img src="images/rotate/3.jpg" alt="" title="" /> 
</div>