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


Представляю рабочий слайде на главной страницы. Сам слайдер выполнен в светлых тонах. От вас требуется его настроить и от будит вам служить. И по дизайну сайт со скриптом преобразится.
И так начнем установку:
Панель управления-Управление дизайном-Таблица стилей (CSS). И вставляем стиль на слайдер.
Код
#preview-contanier {background-attachment: scroll; background-color: transparent; background-image: url("http://zornet.ru/ZORNET/bg_preview.png"); background-position: 0% 0%; background-repeat: repeat-x;}   
#preview-contanier {padding-bottom: 15px; height: 200px; width: 961px; margin: 0 auto 20px auto; text-align: center; position: relative;}   
#preview {width: 900px; padding-top: 40px; margin: 0 auto; text-align: left;}   
#preview-contanier div.arrow-left {position: absolute; top: 95px; left: -10px; width: 28px; height: 28px; display: block; overflow: hidden; text-indent: -9999px; background: url('http://zornet.ru/ZORNET/arrow_left.png') no-repeat; cursor: pointer;}   
#preview-contanier div.arrow-right {position: absolute; top: 95px; right: -10px; width: 28px; height: 28px; display: block; overflow: hidden; text-indent: -9999px; background: url('http://zornet.ru/ZORNET/arrow_right.png') no-repeat; cursor: pointer;}   
li.preview-tumb {padding-left: 0 !important;}   
.preview-tumb {width: 170px; float: left; display: inline; text-align: center; overflow: hidden; margin: 0 5px;}   
.preview-tumb a {display: block; padding: 8px 8px 5px 8px; background: #fff; text-decoration: none; color: #9f9f9f; font-size: 9pt;}   
.preview-tumb a:hover {display: block; padding: 8px 8px 5px 8px; background: #51b5ea; text-decoration: none; color: #fff; font-size: 9pt;}   
.arrow-left, .arrow-right {padding:2px;filter:alpha(opacity=100); ..-opacity:1.0; opacity:1.0; -khtml-opacity:1.0;}     
.arrow-left:hover, .arrow-right:hover {filter:alpha(opacity=80); ..-opacity:0.8; opacity:0.8; -khtml-opacity:0.8;}


Этот код прописываем где вы хотите видеть слайдер. Основном это верх сайта в самый низ его вставляем.
Код
<script type="text/javascript" src="http://zornet.ru/ZORNET/main.js"></script>   
<div id="preview-contanier">   
<div class="arrow-left"></div>   
<div id="preview" class="ie6">   
<ul>   
<li class="preview-tumb panel"><a href="javascript://" onclick="window.open('Адрес сайта 1');return false;" rel="nofollow"><img alt="" style="border: 0 none; width: 150px; height: 110px;" src="Изображение 1"><br>Название 1</a></li>   
<li class="preview-tumb panel"><a href="javascript://" onclick="window.open('Адрес сайта 2');return false;" rel="nofollow"><img alt="" style="border: 0 none; width: 150px; height: 110px;" src="Изображение 2"><br>Название 2</a></li>   
<li class="preview-tumb panel"><a href="javascript://" onclick="window.open('Адрес сайта 3');return false;" rel="nofollow"><img alt="" style="border: 0 none; width: 150px; height: 110px;" src="Изображение 3"><br>Название 3</a></li>   
<li class="preview-tumb panel"><a href="javascript://" onclick="window.open('Адрес сайта 4');return false;" rel="nofollow"><img alt="" style="border: 0 none; width: 150px; height: 110px;" src="Изображение 4"><br>Название 4</a></li>   
<li class="preview-tumb panel"><a href="javascript://" onclick="window.open('Адрес сайта 5');return false;" rel="nofollow"><img alt="" style="border: 0 none; width: 150px; height: 110px;" src="Изображение 5"><br>Название 5</a></li>   
<li class="preview-tumb panel"><a href="javascript://" onclick="window.open('Адрес сайта 6');return false;" rel="nofollow"><img alt="" style="border: 0 none; width: 150px; height: 110px;" src="Изображение 6"><br>Название 6</a></li>   
<li class="preview-tumb panel"><a href="javascript://" onclick="window.open('Адрес сайта 7');return false;" rel="nofollow"><img alt="" style="border: 0 none; width: 150px; height: 110px;" src="Изображение 7"><br>Название 7</a></li>   
<li class="preview-tumb panel"><a href="javascript://" onclick="window.open('Адрес сайта 8');return false;" rel="nofollow"><img alt="" style="border: 0 none; width: 150px; height: 110px;" src="Изображение 8"><br>Название 8</a></li>   
<li class="preview-tumb panel"><a href="javascript://" onclick="window.open('Адрес сайта 9');return false;" rel="nofollow"><img alt="" style="border: 0 none; width: 150px; height: 110px;" src="Изображение 9"><br>Название 9</a></li>   
<li class="preview-tumb panel"><a href="javascript://" onclick="window.open('Адрес сайта 10');return false;" rel="nofollow"><img alt="" style="border: 0 none; width: 150px; height: 110px;" src="Изображение 10"><br>Название 10</a></li>   
</ul>   
</div>   
<div class="arrow-right"></div>   
</div>   
<div style="clear:both;height:10px;"></div>


Думаю по коду разберетесь что куда прописывать. В коде все написано.
Прикрепления: 7247388.jpg (41.7 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Светлый слайдер на главную страницу сайта
  • Страница 1 из 1
  • 1
Поиск: