<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>