• Страница 1 из 1
  • 1
Слайд
Дата: Понедельник, 10.05.2010, 00:26 | Сообщение # 1
Группа:
Пользователи
Сообщений:
13
Offline

Шаг 1:
Ниже приведенный код вставьте внутри тега

Code
<!-- 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:

Code
*{   
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.

Code
<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 (прямая ссылка)
Источник: http://for24.ru/

  • Страница 1 из 1
  • 1
Поиск: