jQuery: Linking to objects by array

programming web dev
1

I am trying to make a jQuery banner that will set a certain image as active when you hover over the thumbnail for that image. This is the code I’m trying to use atm

var $banners = $('#banner a');
var $buttons = $('#banner_buttons li>a');

$buttons.hover(
	function() {
		if($buttons.children().index() == $banners.children().index())
			$banners.addClass('active');
	});

I’m trying to sort of link the thumbnail with the image so whenever there is a hover state for a thumbnail, the complimentary image is active, but also the images will be rotating on a timer, so whenever the image is active, the thumbnail should be active too.

That was a really convoluted explanation so I’ll just link to an example.

Like this banner: http://www.belkin.com/