Untitled

<!doctype html>
<html>
  <head>
	<meta charset='utf-8'>
    <title>AlternatingImages</title>
	<script type="text/javascript" src="jquery.js"</script>
   </head>

	<body>

	<style type="text/css">
		#banners
		{
			position:relative;
		}
		#banners img
		{
			position:absolute;
			z-index:1;
		}
		#banners img.active
		{
			z-index:3;
		}
	</style>

	<div id="banners">
		<img src="1.jpg" class="active" />
		<img src="2.jpg" />
		<img src="3.jpg" />
	</div>

	<script type="text/javascript">
		$(document).ready(function()
		{
			setInterval(function()
			{
				var active = $('#banners .active');

				if(active.next().length > 0)
					var next = active.next();
				else
					var next = $('#banners img:first');

				next.css('z-index','2');

				active.fadeOut(1000,function()
				{
					active.css('z-index','1').show().removeClass('active');

					next.css('z-index','3').addClass('active');
				});
			},3000);
		});
	</script>
	</body>
  </html>