• Страница 1 из 1
  • 1
Слайдер изображений
LaiNeRДата: Среда, 30.06.2010, 20:31 | Сообщение # 1
=Основатель=
Логин: LaiNeR
Имя: Rustam Mosin
Сообщений: 3127
Награды: 51
Репутация: 519
Замечания:
Скрин ТЫКНИ

Шаг 1:

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~-->

Скачать файлы:Тыкни


  • Страница 1 из 1
  • 1
Поиск:

Статистика Форума
Лучшие пользователи
Уважаемые пользователи
Популярные темы
Недавно обновленные темы
LaiNeR Постов [ 3127 ]
Staistesap Постов [ 1545 ]
z1M Постов [ 1488 ]
Mooxyrep Постов [ 1145 ]
Pooniacact Постов [ 986 ]
KoreshoK Постов [ 644 ]
LonS Постов [ 585 ]
BIG_BOSS Постов [ 572 ]
DoZa Постов [ 564 ]
shooter Постов [ 468 ]
LonS Репутация [ 546 ]
LaiNeR Репутация [ 519 ]
Smofee Репутация [ 477 ]
СнAйПер Репутация [ 436 ]
MedeX Репутация [ 412 ]
TiPSy Репутация [ 300 ]
bleff Репутация [ 279 ]
-=SToRM=- Репутация [ 235 ]
A6c3Ht^ Репутация [ 225 ]
NoRD Репутация [ 210 ]
Общение [ 1309 ]
Считаем до 1 000 [ 664 ]
Поговорим обо всем :) (девушки, машины, личная жизнь и тд) [ 369 ]
Афоризмы (Не комментируйте) [ 301 ]
Играем в СЛОВА [ 187 ]
Конкурс "Угадай возраст". [ 183 ]
Конкурс "Угадай автомобиль" [ 110 ]
Предложения по сайту [ 97 ]
Набивка постов [ 80 ]
Обломай товарища [ 75 ]
source-boost.ru | Мониторинг сервера CSS v34 [ 0 ]
source-boost.ru | Мониторинг сервера CSS v34 [ 0 ]
Скачать CSS v34 НОВЫЕ ПУШКИ - cs-kontra.ru [ 0 ]
Скачать CSS v34 НОВЫЕ ПУШКИ - cs-kontra.ru [ 0 ]
Скачать CSS v34 НОВЫЕ ПУШКИ - cs-kontra.ru [ 0 ]
Скачать CSS v34 НОВЫЕ ПУШКИ - cs-kontra.ru [ 0 ]
Скачать CSS v34 НОВЫЕ ПУШКИ - cs-kontra.ru [ 0 ]
Скачать CSS v34 НОВЫЕ ПУШКИ - cs-kontra.ru [ 0 ]
Скачать CSS v34 НОВЫЕ ПУШКИ - cs-kontra.ru [ 0 ]
Swatik [ 1 ]

Хостинг от uCoz | sitemap.xml | sitemap-forum.xml | sitemap-shop.xml | urllist.txt | |
PR-CY.ru