Ниже приведенный код вставьте внутри тега : Код:
<!-- By For24.ru~--> <div
id="header"> <div class="wrap"> <div
id="slide-holder"> <div id="slide-runner"> <a
href=""><img id="slide-img-1" src="images/nature-photo.png"
class="slide" alt="" /></a> <a href=""><img
id="slide-img-2" src="images/nature-photo1.png" class="slide" alt=""
/></a> <a href=""><img id="slide-img-3"
src="images/nature-photo2.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-4"
src="images/nature-photo3.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-5"
src="images/nature-photo4.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-6"
src="images/nature-photo4.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-7"
src="images/nature-photo6.png" class="slide" alt="" /></a>
<div id="slide-controls"> <p id="slide-client"
class="text"><strong>post:
</strong><span></span></p> <p
id="slide-desc" class="text"></p> <p
id="slide-nav"></p> </div> </div>
</div> </div> </div><!-- By
For24.ru~-->
Шаг 2:
Подключаем стили css:
Код:
*{ margin:0; padding:0; }
html{ height:100%; } body{ height:100%;
color:#a4a4a4; cursor:default; font-size:11px;
line-height:16px; text-align:center;
background-color:#000; background-position:50% 0;
background-repeat:no-repeat; font-family:Tahoma,sans-serif;
} a:link,a:visited{ color:#fff;
text-decoration:none; } a img{ border:0; }
div.wrap{ width:993px; margin:0 auto;
text-align:left; } div#top div#nav{ float:left;
clear:both; width:993px; height:52px; margin:22px 0
0; background:url url(images/nav-bg.png) 0 0 no-repeat; }
div#top div#nav ul{ float:left; width:700px;
height:52px; list-style-type:none; } div#nav ul li{
float:left; height:52px; } div#nav ul li a{
border:0; height:52px; display:block;
line-height:52px; text-indent:-9999px; } div#header{
margin:-1px 0 0; } div#video-header{ height:683px;
margin:-1px 0 0; } div#header div.wrap{
height:299px; background:url(images/header-bg.png) 50% 0
no-repeat; } div#header div#slide-holder{
z-index:40; width:993px; height:299px;
position:absolute; } div#header div#slide-holder
div#slide-runner{ top:9px; left:9px; width:973px;
height:278px; overflow:hidden; position:absolute; }
div#header div#slide-holder img{ margin:0; display:none;
position:absolute; } div#header div#slide-holder
div#slide-controls{ left:0; bottom:228px;
width:973px; height:46px; display:none;
position:absolute; background:url( images/slide-bg.png) 0
0; } div#header div#slide-holder div#slide-controls
p.text{ float:left; color:#fff; display:inline;
font-size:10px; line-height:16px; margin:15px 0 0 20px;
text-transform:uppercase; } div#header div#slide-holder
div#slide-controls p#slide-nav{ float:right; height:24px;
display:inline; margin:11px 15px 0 0; } div#header
div#slide-holder div#slide-controls p#slide-nav a{ float:left;
width:24px; height:24px; display:inline;
font-size:11px; margin:0 5px 0 0; line-height:24px;
font-weight:bold; text-align:center; text-decoration:none;
background-position:0 0; background-repeat:no-repeat; }
div#header div#slide-holder div#slide-controls p#slide-nav a.on{
background-position:0 -24px; } div#header div#slide-holder
div#slide-controls p#slide-nav
a{background-image:url(images/silde-nav.png);} div#nav ul li
a{background:url(images/nav.png) no-repeat;}
Шаг 3 :простой JavaScript для Jquery ползунков:
Скопируйте и вставьте следующий код для Jquery ползунков после HTML
BODY.
Код:
<script type=" text="" javascript="">
if(!window.slider) var
slider={};slider.data=[{"id":"slide-img-1","client":"nature
beauty","desc":"nature beauty
photography"},{"id":"slide-img-2","client":"nature beauty","desc":"add
your description here"},{"id":"slide-img-3","client":"nature
beauty","desc":"add your description
here"},{"id":"slide-img-4","client":"nature beauty","desc":"add your
description here"},{"id":"slide-img-5","client":"nature
beauty","desc":"add your description
here"},{"id":"slide-img-6","client":"nature beauty","desc":"add your
description here"},{"id":"slide-img-7","client":"nature
beauty","desc":"add your description here"}];
</script><!-- By For24.ru~-->
Скачать js/css/img/html: http://s1.for24.ru/_ld/0/25_exsli.rar (прямая
ссылка)
Кликните по по любому понравившемуся баннеру ,вы поможите развитию портала,и получите Огромное спасибо от Администрации!