<style>
/* -- Общий блок -- */
#blockvsegoslaidera {
/* -- Делаем посередине -- */
margin:0 auto;
padding:0;
}
/* -- Большой блок -- */
#blockpokaza {
/* -- Отступ блока -- */
margin: 0 5px;
/* -- Ширина блока -- */
width:500px;
/* -- Высота блока -- */
height:500px;
/* -- Упаковка изображения в блок -- */
background-size:100% 100%;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
/* -- Тени блока -- */
-o-background-size:100% 100%;
-o-box-shadow:0px 0px 7px rgba(0,0,0,0.2),
0px 0px 0px 1px rgba(188,188,188,0.1);
box-shadow:0px 0px 7px rgba(0,0,0,0.2),
0px 0px 0px 1px rgba(188,188,188,0.1);
/* -- Тени блока плавно проявляются -- */
-webkit-transition:box-shadow 0.3s ease-in-out;
-moz-transition:box-shadow 0.3s ease-in-out;
-o-transition:box-shadow 0.3s ease-in-out;
transition:box-shadow 0.3s ease-in-out;
/* -- Закругляем края блока -- */
border-radius: 8px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
}
/* -- Большой блок при наведении мышки -- */
#blockpokaza:hover {
/* -- Тени блока при наведении мышки -- */
-o-box-shadow:0px 0px 9px rgba(0,0,0,0.4),
0px 0px 0px 1px rgba(188,188,188,0.1);
box-shadow:0px 0px 9px rgba(0,0,0,0.4),
0px 0px 0px 1px rgba(188,188,188,0.1);
}
/* -- Маленькие блоки -- */
.blockupravlenia {
/* -- Высота поля блоков -- */
height:150px;
/* -- Отступ с низу -- */
margin-bottom:10px;
}
/* -- Маленькие блоки активны -- */
.blockupravlenia a {
/* -- Плавающее положение -- */
float:left;
/* -- Отступы чтобы не слипались -- */
margin: 0 5px;
/* -- Вид курсора при наведении на блоки -- */
cursor: pointer;
/* -- Высота маленьких блоков -- */
height: 150px;
/* -- Ширина маленьких блоков -- */
width: 160px;
/* -- Тени маленьких блоков -- */
-o-box-shadow:0px 0px 7px rgba(0,0,0,0.2),
0px 0px 0px 1px rgba(188,188,188,0.1);
box-shadow:0px 0px 7px rgba(0,0,0,0.2),
0px 0px 0px 1px rgba(188,188,188,0.1);
/* -- Плавность проявления теней -- */
-webkit-transition:box-shadow 0.3s ease-in-out;
-moz-transition:box-shadow 0.3s ease-in-out;
-o-transition:box-shadow 0.3s ease-in-out;
transition:box-shadow 0.3s ease-in-out;
/* -- Округляем края -- */
border-radius: 8px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
}
/* -- Маленькие блоки при наведении -- */
.blockupravlenia a:hover {
/* -- Тени маленьких блоков -- */
-o-box-shadow:0px 0px 9px rgba(0,0,0,0.4),
0px 0px 0px 1px rgba(188,188,188,0.1);
box-shadow:0px 0px 9px rgba(0,0,0,0.4),
0px 0px 0px 1px rgba(188,188,188,0.1);
}
/* -- Маленький блок с картинкой1 -- */
.blockupravlenia .Auto1 {
/* -- Ссылка на картинку -- */
background: url('http://delaisait.ucoz.ru/script/img/1/Auto1.jpg');
/* -- Упаковка картинок в размер -- */
background-size:100% 100%;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
-o-background-size:100% 100%;
}
/* -- Маленький блок с картинкой2 -- */
.blockupravlenia .Auto2 {
/* -- Ссылка на картинку -- */
background: url('http://delaisait.ucoz.ru/script/img/1/Auto2.jpg');
/* -- Упаковка картинок в размер -- */
background-size:100% 100%;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
-o-background-size:100% 100%;
}
/* -- Маленький блок с картинкой3 -- */
.blockupravlenia .Auto3 {
/* -- Ссылка на картинку -- */
background: url('http://delaisait.ucoz.ru/script/img/1/Auto3.jpg');
/* -- Упаковка картинок в размер -- */
background-size:100% 100%;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
-o-background-size:100% 100%;
}
/* -- Маленький блок с картинкой1 при смене -- */
#Auto1:target ~ #blockizmenenia #blockpokaza {
/* -- Ссылка на картинку -- */
background: url('http://delaisait.ucoz.ru/script/img/1/Auto1.jpg');
/* -- Упаковка картинок в размер -- */
background-size:100% 100%;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
-o-background-size:100% 100%;
}
/* -- Маленький блок с картинкой2 при смене -- */
#Auto2:target ~ #blockizmenenia #blockpokaza {
/* -- Ссылка на картинку -- */
background: url('http://delaisait.ucoz.ru/script/img/1/Auto2.jpg');
/* -- Упаковка картинок в размер -- */
background-size:100% 100%;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
-o-background-size:100% 100%;
}
/* -- Маленький блок с картинкой3 при смене -- */
#Auto3:target ~ #blockizmenenia #blockpokaza {
/* -- Ссылка на картинку -- */
background: url('http://delaisait.ucoz.ru/script/img/1/Auto3.jpg');
/* -- Упаковка картинок в размер -- */
background-size:100% 100%;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
-o-background-size:100% 100%;
}
</style>
<! -- Общий блок -- >
<table border="0" id="blockvsegoslaidera">
<tr>
<td>
<! -- Привязка к смене -- >
<span id="Auto1"></span>
<span id="Auto2"></span>
<span id="Auto3"></span>
<! -- Блок управления сменой -- >
<div class="blockupravlenia">
<a href="#Auto1" class="Auto1"></a>
<a href="#Auto2" class="Auto2"></a>
<a href="#Auto3" class="Auto3"></a>
</div>
<div id="blockizmenenia">
<div id="blockpokaza">
</div>
</div>
</div>
</td>
</tr>
</table>