[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » ***Всё для Ucoz*** » Всё для Ucoz » Слайдер изображений для Ucoz (Слайдер изображений для Ucoz)
Слайдер изображений для Ucoz
GrozaZoolДата: Среда, 02.03.2011, 22:20 | Сообщение # 1

Главный админ

Сообщений: 141
Репутация: 12784
Статус: Offline
Слайдер изображений для Ucoz еще так называемый флеш бар который листает картинки.
Установка:

Вставить код где хотим видеть

Code

<style type="text/css">   
#slideshow { position: relative; padding: 0; list-style: none; width: 620px; height: 300px; overflow: hidden; }   
#slideshow img { border: none; }   
#slideshow .arrow { width: 42px; height: 50px; display: block; position: absolute; top: 116px; text-indent: -9999px; overflow: hidden; cursor: pointer; }   
#slideshow .arrowL { background: url() no-repeat; left: 0; }   
#slideshow .arrowR { background: url() -42px 0px no-repeat; right: 0; }   
.slideView, .thumbList { margin: 0; padding: 0; list-style: none; }   
.slideView { height: auto; position: relative; top: 0; left: 0; overflow: hidden; z-index: 0; }   
.slideView li { width: 100%; height: 300px; float: left; margin: 0; display: inline; }   
.slideView li a { display: block; width: 100%; height: 100%; }   
#slideshow .desc { padding: 5px; margin: 0; width: 620px; height: 24px; background: black; position: absolute; bottom: 0; left: 0px; color: white; font-weight: bolder; overflow: hidden; z-index: 6; font-size: 12px; }   
#slideshow .wrap { background: black; position: absolute; height: 100%px; bottom: 0; left: 0px; z-index: 90;}   
#slideshow .thumbList { overflow: hidden; position: absolute; top: 0px; left: 0px; margin-top: 12px; display:none; }   
#slideshow .thumbList li { width: 107px; height: 52px; display: inline; margin: 0; float: left; display:none; }   
#slideshow .thumbList li a { display: block; width: 80px; height: 48px; border: 2px solid black; margin-left: 11px; }   
#slideshow .thumbList li a:hover { border-color: #f75514; }   
</style>   

<script src="http://cs-ural.clan.su/host/js/6.js" type="text/javascript"></script>   
   <script type="text/javascript">   
$(function() {   
$("#slideshow").slideView({   
   loop: true   
   });   
});   
</script>   
<div class="rt-grid-8 rt-alpha">   
   <div class="flush">   
   <div class="rt-block">   
   <div class="module-content">   
   <div class="module-content2">   
   <div id="slideshow">   
   <ul class="slideView">   
   <li><a href="адрес1"><img src="изображение1" alt="Текст 1" width="620" height="300" /></a></li>   
   <li><a href="адрес2"><img src="изображение2" alt="Текст 2" width="620" height="300" /></a></li>   
   </ul>   
   </div>   
   </div>   
   </div>   
   </div>   
   </div>   
</div>

P.S Изменить на свои ссылки картинок в коде:

Code
<li><a href="адрес1"><img src="изображение1" alt="Текст 1" width="620" height="300" /></a></li>   
   <li><a href="адрес2"><img src="изображение2" alt="Текст 2" width="620" height="300" /></a></li>

вот пример с одного сайта...


 
Форум » ***Всё для Ucoz*** » Всё для Ucoz » Слайдер изображений для Ucoz (Слайдер изображений для Ucoz)
  • Страница 1 из 1
  • 1
Поиск:



Яндекс.Метрика
Copyright © 2010-2024г