Главная » Файлы » Всё для ucoz » Скрипты для uCoz [ Добавить материал ]

Слайдер изображений
[ · Скриншот ] 09.05.2010, 11:03
Слайдер изображений
Ниже приведенный код вставьте внутри тега :
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~-->
Категория: Скрипты для uCoz | Добавил: admin | Теги: изображений, Скрипты для Ucoza, Слайдер
Просмотров: 501 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]