Привет Гость!
Ты должен:
Войти или зарегистрироваться
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Слайдер изображений
АндрейДата: Понедельник, 31.05.2010, 11:16 | Сообщение # 1
Генерал-полковник
Группа: Администраторы
Сообщений: 58
Награды: 0
Репутация: 11
Статус: 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 (прямая ссылка)
 
  • Страница 1 из 1
  • 1
Поиск:

88x31
88x31