Javascript-форум - Эффекты в галерее

<html>
	<head>
		<title>example</title>
		<style>
		.bl
		{
		width: 50px;
		height: 50px;
		margin: 5px;
		float: left;
		border: 1px solid black;
		}
		
		.big_container
		{
		width: 300px;
		height: 300px;
		border: 1px solid black;
		}
		</style>
	</head>
	<body>
		<div class="big_container"></div>
		<div>
			<div class="bl" color="red" style="background-color: red;"></div>
			<div class="bl" color="yellow" style="background-color: yellow;"></div>
			<div class="bl" color="blue" style="background-color: blue;"></div>
			<div class="bl" color="silver" style="background-color: silver;"></div>
			<div class="bl" color="orange" style="background-color: orange;"></div>
			<div class="bl" color="green" style="background-color: green;"></div>
			<div class="bl" color="aqua" style="background-color: aqua;"></div>
		</div>
		<input type="button" value="назад" class="prev"> | <input type="button" value="вперед" class="next">
		<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
		<!--<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">-->
		<script>
var select,
	big_container = $('.big_container');

$('.bl').click(function ()
	{
	select = this;
	big_container.css('background', $(this).attr('color'));
	});
	
$('.prev').click(function ()
	{
	if (!select)
		return;
	
	var _select = $(select).prev();
	
	if (_select.length == 0)
		return;
	
	select = _select;
	big_container.css('background', $(select).attr('color'));
	});
	
$('.next').click(function ()
	{
	if (!select)
		return;
	
	var _select = $(select).next();
	
	if (_select.length == 0)
		return;
	
	select = _select;
	big_container.css('background', $(select).attr('color'));
	});
		</script>
	</body>
</html>