Rotating Banner

Rotating banners are commonly used throughout the web and can have an unlimited variation to their layout and design. My example illustrates how you can easily and effectively have animation like capabilities without having to incorporate Flash. A Flash based solution does offer other benefits that jQuery, or JavaScript for that matter, cannot compare to without usually suffering some kind of a performance hit. The images used in this example are not my own and are trademarks of Valve Corporation.

Download

Demo

Half-Life 2Team Fortress 2PortalLeft 4 Dead 2

Images

HTML

<div id="banner_wrapper">
	<div id="banner_menu">
		<a class="menu1">
			<span>Half-Life 2</span>
		</a>
		<a class="menu2">
			<span>Team Fortress 2</span>
		</a>
		<a class="menu3">
			<span>Portal</span>
		</a>
		<a class="menu4">
			<span>Left 4 Dead 2</span>
		</a>
	</div>

	<div id="banner">
		<a id="home_photo" href="javascript:;">
			<img src="/wp-content/uploads/2010/05/banner_valve.jpg" alt="Valve Software" />
		</a>
		<a href="javascript:;">
			<img src="/wp-content/uploads/2010/05/banner_hl2.jpg" alt="Half-Life 2" />
		</a>
		<a href="javascript:;">
			<img src="/wp-content/uploads/2010/05/banner_tf2.jpg" alt="Team Fortress 2" />
		</a>
		<a href="javascript:;">
			<img src="/wp-content/uploads/2010/05/banner_portal.jpg" alt="Portal" />
		</a>
		<a href="javascript:;">
			<img src="/wp-content/uploads/2010/05/banner_l4d2.jpg" alt="Left 4 Dead 2" />
		</a>
	</div>
</div>

JavaScript

$(document).ready(function() {
	var loaded = 0;
	var timerId = 0;
	var current = null;

	var stop = function() {
		clearTimeout(timerId);
		timerId = 0;
	};

	var resume = function(func, el) {
		timerId = window.setTimeout(function() { func(el); }, 4000);
	};

	var reset = function(e) {
		loaded = 0;

		if(e)
			e.fadeOut(500);

		original.fadeIn(500, function() { loaded = 1; });
	};

	var original = $('#home_photo');

	reset();

	//
	$('#banner > a').each(function(i) {
		if(i > 0)
		{
			var banner = $(this);

			$(this).mouseover(function() {
				stop();
			}).mouseout(function() {
				resume(reset, banner);
			});
		}
	});

	$('#banner_menu > a').each(function(i) {
		i += 1;
		var banner = $('#banner a:eq(' + i + ')');

		$(this).mouseover(function() {
			if(!loaded)
				return;

			original.hide();

			if(current != null)
				$('#banner > a:eq(' + current +')').hide();

			current = i;

			banner.show();
			stop();
		}).mouseout(function() {
			if(!loaded)
				return;

			resume(reset, banner);
		});
	});
});

CSS

#banner_wrapper {
	display: block;
	height: 253px;
	width: 684px;
}
#banner_menu {
	float: left;
	width: 125px;
}
#banner_menu a {
	float: left;
	height: 61px;
	margin: 0 3px 3px 0;
	width: 125px;
}
#banner_menu a span {
	display: none;
}
#banner_menu a {
	background: url('banner_tabs.jpg') no-repeat 0 0;
}
#banner_menu a.menu2 {
	background-position: 0 -61px;
}
#banner_menu a.menu3 {
	background-position: 0 -122px;
}
#banner_menu a.menu4 {
	background-position: 0 -183px;
}
#banner {
	float: right;
	height: 253px;
	position: relative;
	width: 556px;
}
* html #banner {
	height: 182px;
}
html>body #banner {
	margin-bottom: 2px;
}
#banner #home_photo {
	display: block;
}
#banner a {
	display: none;
	position: absolute;
}
#banner a img {
	border: none;
}