Skip to content

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.

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.hide();

		original.fadeIn(1000, 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;
	width: 556px;
}
* html #banner {
	height: 182px;
}
html>body #banner {
	margin-bottom: 2px;
}
#banner #home_photo {
	display: block;
}
#banner a {
	display: none;
}
2 Comments
  1. Muito legal esse banner, parabéns

    • Matthew permalink

      I had to use a translator to know what you said. ¡Mucho gracias!

Leave a Reply

Note: XHTML is allowed. Your email address will never be published.

Subscribe to this comment feed via RSS