• Страница 1 из 1
  • 1
Модератор форума: [A]™Stewart  
Слайдер изображений
GreYДата: Четверг, 13.05.2010, 18:52 | Сообщение # 1




ICQ:

Сообщений: 13
Награды: 0 +

null [ 0 ] null

Замечания: ±

 
http://s1.for24.ru/_ld/0/24_end.png

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

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
Поиск:

Статистика Форума
Лучшие пользователи
Уважаемые пользователи
Популярные темы
Недавно обновленные темы
[A]™Stewart Постов [ 787 ]
azxx Постов [ 202 ]
sIlvEr Постов [ 143 ]
tomek Постов [ 114 ]
lazzy Постов [ 105 ]
Back-777 Постов [ 100 ]
[eXplousE] Постов [ 85 ]
maxvell Постов [ 68 ]
Evilson Постов [ 62 ]
N1ck3L= Постов [ 60 ]
tomek [ 87 ]
maxvell [ 72 ]
[A]™Stewart [ 53 ]
sIlvEr [ 42 ]
lazzy [ 21 ]
[AlfA_Team]Ma[K]s [ 20 ]
су-27 [ 18 ]
lancer [ 12 ]
Shark [ 11 ]
mInf [ 10 ]

Счетаем до 500

(Постов: 64)

Набивка постов

(Постов: 33)

Привлечение пос...

(Постов: 20)

Конкурс на икон...

(Постов: 19)

Я вижу,что ты в...

(Постов: 19)

NO AVATAR

(Постов: 19)

Голосование!!!

(Постов: 18)

Кто может помоч...

(Постов: 17)

Заявки писать с...

(Постов: 15)

Города

(Постов: 14)

Мне нужна душевая ка... [ 16.06.2025 ]
Занятия по йоге ретр... [ 16.06.2025 ]
Где можно погрузчики... [ 16.06.2025 ]
Кто видел в продаже ... [ 16.06.2025 ]
PSD шапки kentgames [ 21.04.2025 ]
66 by Marlboro [ 21.04.2025 ]
банер 88*31 [ 21.04.2025 ]
Новый ТОП100 (Подойд... [ 20.04.2025 ]
Новый видок каталога... [ 20.04.2025 ]
Баннер 150x200 [ 05.04.2025 ]

Alft-Team-CS.clan.su © Хостинг от uCoz При Копировании материалов, ссылка на сайт ОБЯЗАТЕЛЬНА! ForumSiteMap.xml SiteMap.xml