Разметка в body
<div id="wrapper">
<div id="block1"></div>
<div id="slider">
<div id="slider-show">
<img src="img1.jpg" />
</div>
<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
</div>
<div id="block2"></div>
</div>
Весь прикол в стиля
#wrapper {
margin:0 auto;
width:1000px;
border: 1px solid #000;
position:relative;
}
#block1, #block2 {
height:200px;
}
#block1 {
background-color: purple;
}
#block2 {
background-color: green;
}
#slider {
background-color: blue; // или же фоновая картинка
padding: 20px;
width:660px;
height:360px;
position:absolute;
далее два варианта как расположить
1.
top: NNpx - подобрать самому
left: NNpx - подобрать самому
2.
top: NNpx - подобрать самому
left: 50%;
марджин-лефт: -350px;
}
#slider > img {
display:none;
}
#slider-show {
по-умолчанию получаетя
width:660px;
height:360px;
это уже должен быть размер картинок в слайд-шоу
для других размеров картинок можно обратным ходов высчитать каков будет размер самой области слайдера (синий фон)
все картинки для слайд-шоу должны быть одного размера
}
дальше уже javascript, jQuery
Сообщение отредактировал ray1978: 21 Март 2015 - 04:53