All-For-Kompa.RU

Сегодня:
Карта сайта форум Главная
Скрыть рекламный блок

Всё для компа

chat

Видео дня

Популярное

Реклама

Хочешь помочь проекту? Установи наш баннер!

Партнёры



Развлекательный портал по игре Dota 2. У нас вы первым узнаете о последних игровых новостях, сможете почитать интересные статьи и гайды, посмотреть стримы популярных комментаторов и многое другое.

Про-софт - сайт професионального софта. Ето сайт не только софта но также игровых дополнений, музыки, фильмов, игр для ПК а также читов для ПК игр. Постоянное обновление материалов и каждый день появляется чтото новенькое!

Авторизация

Реклама

Хочешь помочь проекту? Установи наш баннер!

Опрос

Откуда удобнее качать?

1. depositfiles.com
2. letitbit.net
3. другой
4. Rapidshare.de
5. ifolder.ru
6. uploading.com
7. filespace.ru
8. Oxyshare.com
9. upload2.ne
10. quickdump.com
11. Megaupload.com
12. Hyperupload.com
13. Turboupload.com
14. Mytempdir.com
15. getfile.biz

Реклама

Хочешь помочь проекту? Установи наш баннер!

Популярные тэги

Комментарии

Счетчики

На сайте: 6
Прохожие: 6
Пользователей: 0
Статус:

Счётчик тИЦ и PR Rambler's Top100
HTML и DHTML [2] JavaScript [5]
Mootools [2] JQuery [22]
Разное [2] CSS [4]
PHP [1]
АвторАвтор: leonP4 | ДатаДата: 14.09.2010 |Голосов: 0


Отличный Jquery слайдер изображений, он хорошо подойдет для вашего сайта а также можно адаптировать под информер вывода случайных картинок из каталога изображений.

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

Все готово! не забываем залить файлы из архива.


Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Популярные файлыНовые файлы
Call of Duty 5: World at ...[ Скачали 68111 раз ]
Амфибии, Гайд по ассасина...[ Скачали 32433 раз ]
Амфибии, Гайд по шаманам.[ Скачали 31374 раз ]
cs 1.6 patch v48 full[ Скачали 29744 раз ]
Русский бот PW Alfa v 2.6[ Скачали 17920 раз ]
Огромный пак глюков и баг...[ Скачали 13375 раз ]
civilization 5 скачать бе...[ Скачали 12423 раз ]
PW MP5[ Скачали 11744 раз ]
MHS-Bot-PW 2.3 ботовод[ Скачали 11195 раз ]
Niko Bellic (нико белич) ...[ Скачали 10485 раз ]
Wallpapers Girls №1200[ Добавлен 02.11.2025 ]
Wallpapers Girls №1199[ Добавлен 26.10.2025 ]
Wallpapers Mix №1980[ Добавлен 24.10.2025 ]
Wallpapers Mix №1979[ Добавлен 19.10.2025 ]
Wallpapers Mix №1978[ Добавлен 17.10.2025 ]
Wallpapers Mix №1977[ Добавлен 12.10.2025 ]
Wallpapers Mix №1976[ Добавлен 11.10.2025 ]
Wallpapers Mix №1975[ Добавлен 08.10.2025 ]
Wallpapers Mix №1974[ Добавлен 05.10.2025 ]
Wallpapers Mix №1973[ Добавлен 04.10.2025 ]