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.

Download

Rotating Banner (1787)

Demo

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;
}
11 Comments
  1. Muito legal esse banner, parabéns

    • Matthew permalink

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

  2. Rahul permalink

    hi…..

    ur script is great…… just i thing i want to ask….. can we also make it like if their is no mouse over on any thumbnail can it automatically change after x seconds

    pls reply

    thanks

    • Matthew permalink

      It’s certainly possible, I just haven’t taken the time to create it.

  3. Rahul permalink

    can u pls help me i want to add this feature…… what i need to do…… only a few guide lines will help a lot………

    thanks

  4. Estoy aprendiendo jQuery y este es un muy buen aporte, gracias!

  5. sir y cant u give zipped version of all these stuff..it ll be easy for us to customise if it is so….

    • Matthew permalink

      I added a download link for you. It should work right out zip file :)

  6. Oyewumi Abayomi permalink

    Thanks man, i have to deliver a project by morning using a custom made banner and u just solved my problem.
    Big thanks

Trackbacks & Pingbacks

  1. slider | bipbip online

Leave a Reply

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

Subscribe to this comment feed via RSS