00:13
Обновить
Среда, 08.01.2025, 00:13
Реклама
Реклама
Реклама
Место свободно
Место свободно
Место свободно
  • Страница 1 из 1
  • 1
Слайдер изображений
PATRIOTДата: Пятница, 22.10.2010, 21:58 | Сообщение # 1
Генералиссимус

Сообщений: ( 1077 )

За создание сайта За 50 сообщений За 100 постов За 150 Постов За 200 Постов


Живой пример: http://s1.for24.ru/_ld/0/27_index.html

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



Полная статистика сайта
Последние новости Самые отвечаемые темы Последние статьи Последние сообщения
Google ударит по пиратам ... 07.12.2010
Electronic Arts переходит... 07.12.2010
Поле битвы — браузеры 07.12.2010
Portal 2 опять отложили 07.12.2010
Скачал Ведьмка — иди под ... 07.12.2010
Заявка на вступление в ко... 9
Оцениваем не стисняесмя ... 2
Мини фотохостинг на вашем... 1
Мини Профиль 1
Новый мини-профиль серый 0
Словарь CSS 04.02.2010
Распрыг 04.02.2010
Что такое Steam 04.02.2010
Как создать свой сервер в... 04.02.2010
Valve Anti-Cheat (VAC) 04.02.2010
Тема Дата и Время Автор
Новый мини-профиль с... 17.06.2012 ; 14:02 Lookflaco
Радио онлайн для сай... 17.06.2012 ; 14:01 Lookflaco
Вид опроса - скрипт ... 17.06.2012 ; 14:00 Lookflaco
Красивый поиск по са... 08.05.2012 ; 15:53 Aninew
Очень красивый мини ... 08.05.2012 ; 15:53 Aninew
Прикольные флэш часы... 08.05.2012 ; 15:53 Aninew
флэш календарь 08.05.2012 ; 15:52 Aninew
Хороший изменённый м... 10.03.2012 ; 12:33 Batareyka
Поднятье страницы вв... 10.03.2012 ; 12:33 Batareyka
Мы Vконтакте.VK (ото... 10.03.2012 ; 12:32 Batareyka
Стилизация опроса uC... 10.03.2012 ; 12:32 Batareyka
Нужна помощ!!! 16.12.2010 ; 16:02 xlop4ik
Новые пользователи Активные пользователи Лучшие комментаторы
Bitfood 07.10.2013
greenpis 21.03.2013
startsmart 27.10.2012
laym 31.08.2012
Lookflaco 17.06.2012
Aninew 08.05.2012
PATRIOT 1077
---๖ۣۜDJ--- 6
Batareyka 4
Aninew 4
xlop4ik 3
Lookflaco 3
PATRIOT 12
Круис 5
0_o 1
-RUS-7 0
Red 0
Enclave 0

POS-CS.RU ©Все права защищены! Дизайн данного сайта полностью принадлежит Администратору Сайта Используются технологии uCoz Сайт оптимизирован под браузер FireFox Mozila. Sitemap | Sitemap-forum.