Реклама
 
Личные сообщения() Пользователи Новые сообщения на форуме Правила форума Поиск
  • Страница 1 из 1
  • 1
Слайдер изображений (Jquery)
Пост# 1
Дата: Среда, 30.03.2011, 17:37

Закон превыше всего
Группа: Гл.Администраторы
Ранг: Генералиссимус
Сообщений: 422
Репутация: 10502 ±
Награды: 11 ±
Статус:
Шаг 1:
Ниже приведенный код вставьте внутри тега :
Code
<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"><!-- By For24.ru~--></p>     
<p id="slide-nav"></p>     
</div>     
</div>     
</div>     
</div>     
</div>     

Шаг 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>

Скачать js/css/img/html:
http://s1.for24.ru/_ld/0/25_exsli.rar -(прямая ссылка)
http://depositfiles.com/files/yp22v9iw5 - (depositfiles)
Живой пример:
http://s1.for24.ru/_ld/0/27_index.html
Украина
  • Страница 1 из 1
  • 1
Поиск:

Просматривать сайт рекомендуется с бразуеров Opera и FireFox.
Сайт оптимизирован под любое разрешение экрана.
  Desing by de7 and Hardr1de.
Проверить тиц и PR