<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="next">
<script>
var big_container = document.querySelector('.big_container'),
select;
document.querySelector('input[type=button]').onclick = function ()
{
if (!select || !select.nextElementSibling)
return;
select = select.nextElementSibling;
big_container.style.backgroundColor = select.getAttribute('color');
}
Array.prototype.forEach.call(document.querySelectorAll('.bl'), function (ths)
{
ths.onclick = function ()
{
select = this;
big_container.style.backgroundColor = this.getAttribute('color');
}
});
</script>
</body>
</html>