[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » Беседка » Скрипты для Ucoz » Слайдер как на главной странице Ucoz.
Слайдер как на главной странице Ucoz.
Мариш@Дата: Четверг, 16.05.2013, 13:45 | Сообщение # 1
Генерал-полковник
Группа: Администраторы
Сообщений: 873
Статус: Offline
Установка: 
1. Открываем: 
Панель управления ---> Управление дизайном ---> Таблица стилей (CSS), вставляем код в самый вверх: 
Код
.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;}
 
2. Эту часть кода вставляем в место, где должен быть наш слайдер: 

Код
<script type="text/javascript" src="http://fotki.ucoz.ua/script/primery/slider_ucoz/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>

Адрес сайта 1, 2, 3... - адреса сайтов. 
Изображение 1, 2, 3... - адреса картинок. 
Название 1, 2, 3... - названия.
источник


 
Форум » Беседка » Скрипты для Ucoz » Слайдер как на главной странице Ucoz.
  • Страница 1 из 1
  • 1
Поиск: