Как сделать слайд-шоу с элементом style="background: url(img)?

Question

[Markus Kelvin]

Добрый день,

Подскажите пожалуйста, как сделать уже на существующем сайте: agrolino(точка)com, под меню слайд-шоу.

Весь сайт состоит из слоев div, в центрально части сайта, если слой div middle, background которого в данный момент загружается анимированным гифом, естетственно все это очень примитивно и ужасно не качественно, также сам файл очень тяжелый.

Пробовал наложить готовые слайд-шоу, но есть загвозка... на этом же слое располагается UL список который привязан к jquery и создает анимированную (типа слайдер) меню.... и это все сбивается при наложение постороеннго слайд-шоу....

Подскажите пожалуйста как заделать слайд шоу на единственном элементе background

Извеняюсь код очень грязный, просто для наглядности примера...

<div id="middle" style="background: url(img/bg_final.gif) left top no-repeat;" >
	<ul style="width: 973px; height: 340px;" id="slideMenu">
			
	<li class="" style="width: 195px; left: 0px; margin: 0px; position: absolute; overflow: hidden;    display: block;" id="slide1">
	<div style="overflow: hidden; margin-top: 155px; height: 110px; display: block;" class="slide">
		<h3 id="slide1_ttl"><b>Agrolino</b></h3>
	
   <div id="slide1_descr" class="descr" style="display:none"><p><a href="agrolino.html"></a></p></div>
	</div>
	</li>
				
	<li style="width: 192.5px; left: 197px; margin: 0px; position: absolute;" id="slide2">
	<div style="overflow: hidden; margin-top: 155px; height: 110px; display: block;" class="slide">
	<h3 id="slide2_ttl">Group companies</h3>
	div id="slide2_descr" class="descr" style="display:none"><p><a href="group.html"></a></p></div>
	</div>
	</li>
				
	<li style="width: 192.5px; left: 391.5px; margin: 0px; position: absolute;" id="slide3">
	<div style="overflow: hidden; margin-top: 155px; height: 110px; display: block;" class="slide">
	<h3 id="slide3_ttl">Our products</h3>
	<div id="slide3_descr" class="descr" style="display:none"><p><a href="products.html"></a></p></div>
	</div>
	</li>
				
	<li style="width: 192.5px; left: 585.999px; margin: 0px; position: absolute;" id="slide4">
	<div style="overflow: hidden; margin-top: 155px; height: 110px; display: block;" class="slide">
	<h3 id="slide4_ttl">News</h3>
	<div id="slide4_descr" class="descr" style="display:none"><p><a href="news.html"></a></p></div>
	</div>
	</li>
				
	<li style="width: 192.5px; right: 0px; margin: 0px; position: absolute;" id="slide5">
	<div class="slide" style="margin: 155px 6px 0pt 9px; overflow: hidden; height: 110px; display: block;">
	<h3 id="slide5_ttl">Contact</h3>
	<div id="slide5_descr" class="descr" style="display:none"><p><a href="contact.html"></a></p></div>
	</div>
	</li>
			
				
</ul>
</div>

Answer 1

[enurich]

Попробуйте к этому div-у с меню прилепить Vegas

Comments

[Markus Kelvin]

Спасибо, хороший пример... если разобрались в Vegas, как можно прикрепить его именно к определенно dıv-у, а не ко общему фону сайта.....

Answer 2

[devunion]

Самый простой способ - взять уже готовую библиотеку на jQuery. Погуглите "JQuery slider". Там же можно и посмотреть реализацию.

Answer 3

[Сергей Попов]

ну вы можете взять готовый слайдер как вам предлагают выше, и положить его в контейнер, внутри которого спозиционировать, сверху, ваше меню.

Или напишите простенький скрипт который каждые 5 секунд меняет свойство background

Comments

[Markus Kelvin]

к сожалению я уже так пробовал... у меня есть несколько вариантов готовых слайд шоу, и пытался их поставить вместо задав каждому свой z-index атрибут, но в этом случаи... меню ломается, вообщем никак не хочет попадать в то место, и ломается...
поэтому был найдет лишь один вариант, это внедрить в background DIV через style="background: url(img)