Приветствую Вас Прохожий | RSS Воскресенье, 11.12.2016, 05:11
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 4
Гостей: 4
Пользователей: 0



Главная » Файлы » Скрипты для uCoz » Скрипты Вид новостей

Красивый Слайдер картинок

Красивый Слайдер картинок
Шаг 1:
Ниже приведенный код вставьте внутри тега :
Код:
<!-- 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:

Код:
*{  
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.

Код:
<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~-->

Автор\Источник: не указан или не известен!

Для того что бы скачать архив необходимо зайти на сайт как пользователь. Размер: 1.3 Мб
Просмотров: 4523 | Комментарии: 3 | Рейтинг: 3.0/2 | |Категория: Скрипты Вид новостей | Добавил: ALINA | Дата: 19.05.2010 | Скачали: 12 | Теги: картинок, слайдер, красивый
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 3
3 MDNdemon   Дата: 08.01.2011  Время: 23:40   [№ 5840]
кидай в head

2 ygeorge   Дата: 20.06.2010  Время: 14:25   [№ 3321]
Не работает sad Она рассчитана на php сайты.
А куда Шаг 3 вставлять wacko

1 benimax7   Дата: 19.05.2010  Время: 18:13   [№ 2969]
Класная штука.. smile


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Форма входа
Логин:
Пароль:


Поиск


На форуме

1 Продажа рекламные мест ...

2

2 Файловик. Уникальные те...

0

3 Куплю сайты в индексе Я...

1

4 Куплю сайты с ТИЦ/PR (п...

9

5 Предлагаю услуги для ан...

0

6 Предлагаю услуги по про...

0

7 Комплексный прогон сайт...

51

8 Сайт онлайн фильмов на ...

1

9 Проблема с таблицей

9

10 Отредактировать фото

2


Подробней о форуме


Комментарии



Copyright UcozOn.ru™ © 2008-2016


Кнопка 88х31 сайта ucozon.ru