• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Красивый слайдер для сайта ucoz - Скрипт
Красивый слайдер для сайта ucoz - Скрипт
Kosten
Четверг, 14 Февраля 2013 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44356
Награды: 70


Красивый слайдер для сайта ucoz - Скрипт. Сдайдер по своей структуре не прохо выполнен и подойдет на любой сайт системы uCoz.
Установка:
Первое что сделаем идем в Таблица стилей (CSS) И прописываем стиль на слайдер.
Код
.container1 {width: 500px; padding: 0; margin: 0 auto;}  
.main_view {float: left; position: relative; margin-bottom: 25px; border-bottom:1px solid black; border-right:1px solid black; border-left:1px solid black;}  
.window {height:367px; width: 500px; border: 6px solid #FFFFFF; overflow: hidden; position: relative;}  
.image_reel {position: absolute; top: 0; left: 0;}  
.image_reel img {float: left;}  
.paging {position: absolute; bottom: 10px; right: -7px; width: 178px; height:47px; z-index: 100; text-align: center; line-height: 40px; background: url(http://zornet.ru/ZORNET/paging_bg2.png) no-repeat; display: none;}  
.paging a {padding: 5px; text-decoration: none; color: #fff;}  
.paging a.active {font-weight: bold; background: #920000; border: 1px solid #610000; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px;}


Этот код прописываем, где по вашему мнению должен быть слайдер.
Код
<div class="container1">  
<div class="main_view">  
<div class="window">  
<div class="image_reel">  
<a href="Ссылка 1"><img src="Ссылка на картинку 1"></a>  
<a href="Ссылка 2"><img src="Ссылка на картинку 2"></a>  
<a href="Ссылка 3"><img src="Ссылка на картинку 3"></a>  
<a href="Ссылка 4"><img src="Ссылка на картинку 4"></a>  
<a href="Ссылка 5"><img src="Ссылка на картинку 5"></a>  
<a href="Ссылка 6"><img src="Ссылка на картинку 6"></a>  
</div>  
</div>  
<div class="paging" style="display: block">  
<a href="#" rel="1" class="">1</a>  
<a href="#" rel="2" class="">2</a>  
<a href="#" rel="3" class="">3</a>  
<a href="#" rel="4" class="">4</a>  
<a href="#" rel="5" class="">5</a>  
<a href="#" rel="6" class="active">6</a>  
</div>  
</div>  
</div>  
<script type="text/javascript" src="http://zornet.ru/ZORNET/slider.js"></script>  
<div style="clear:both;height:10px;"></div>


P.S - Слайдер можно регулировать и подогнать под свой сайт.
Прикрепления: 3841104.jpg (50.8 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Красивый слайдер для сайта ucoz - Скрипт
  • Страница 1 из 1
  • 1
Поиск: