Новый слайдер для сайтов ucoz - 20 Ноября 2010 - $//esofa.ucoz.com/panel/?a=tmpl;m=6;t=2SITE_NAME$

META»


Добро пожаловать на сайт оформление windows Esofa.ucoz.com На нашем сайте вы можете бесплатно скачать темы для windows, скины для winamp, скины для icq, скринсейверы и многое другое. Наш сайт создан для того, что-бы приносить удовольствие людям !





Навигация
Основное: Главная
Категории
Антивирусы [133]
Скачать Игры [66]
Скачать Фильмы [109]
Скачать Музыку [135]
Всё для Windows XP [120]
Всё для Windows Vista [20]
Всё для Windows 7 [81]
Интернет и сети [102]
Оффис и текст [39]
Мультимедия [133]
Веб Мастеру [108]
Системные [75]
Интерфейс [130]
Драйвера [100]
Графика [126]
Эффекты [18]
разное [109]
Работа с текстом [20]
Работа с фото [20]
Графика для сайта [20]
Дизайн [0]
Анимация [0]
Практика [0]
Работа с планшетом [0]
Плагины [17]
Темы для Windows Xp [26]
Темы для Windows Vista [30]
Темы для Windows 7 [60]
Иконки [18]
Заставки [66]
Курсоры [10]
Мобильная зона [67]
Обои для Рабочего стола [90]
Темы для Браузеров [3]
Шаблоны для Ucoz [12]
Украшения Windows [57]
Экраны Загрузки [0]
Скины для плееров [60]
Скрипты для Ucoz [59]
Видео Уроки UCoz [6]
Икон Ucoz [10]
Кисти Ф [17]
Градиенты ф [0]
Популярные уроки фотошоп [7]
Cтатистика
Онлайн всего: 29
Гостей: 29
Пользователей: 0
Счётчик тиц pr

Главная » 2010 » Ноябрь » 20 » Новый слайдер для сайтов ucoz
15:22
Новый слайдер для сайтов ucoz

Установка:

В css:

Код: Выделить всё
#featured{  
  width:400px;  
  padding-right:110px;  
  position:relative;  
  border:5px solid #ccc;  
  height:250px;  
  background:#fff;  
}  
#featured ul.ui-tabs-nav{  
  position:absolute;  
  top:0; left:400px;  
  list-style:none;  
  padding:0; margin:0;  
  width:250px;  
}  
#featured ul.ui-tabs-nav li{  
  padding:1px 0; padding-left:13px;  
  font-size:12px;  
  color:#666;  
}  
#featured ul.ui-tabs-nav li img{  
  float:left; margin:2px 5px;  
  background:#fff;  
  padding:2px;  
  border:1px solid #eee;  
}  
#featured ul.ui-tabs-nav li span{  
  font-size:11px; font-family:Verdana;  
  line-height:18px;  
}  
#featured li.ui-tabs-nav-item a{  
  display:block;  
  width:96px;  
  height:60px;  
  color:#333; background:#fff;  
  line-height:20px;  
}  
#featured li.ui-tabs-nav-item a:hover{  
  background:#f2f2f2;  
}  
#featured li.ui-tabs-selected{  
  background:url('http://arsamania.ucoz.ru//images/selected-item.gif') top left no-repeat;  
}  
#featured ul.ui-tabs-nav li.ui-tabs-selected a{  
  background:#ccc;  
}  
#featured .ui-tabs-panel{  
  width:400px; height:250px;  
  background:#999; position:relative;  
}  
#featured .ui-tabs-panel .info{  
  position:absolute;  
  top:180px; left:0;  
  width:400px; height:70px;  
  background: url('http://arsamania.ucoz.ru//images/transparent-bg.png');  
}

Это перед head:

Код: Выделить всё
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>  
<script type="text/javascript">  
  $(document).ready(function(){  
  $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);  
  });  
</script>

А это в любое место, где хотите видеть слайдер:

Код: Выделить всё
<div id="newsstat"><div id="featured"> <ul class="ui-tabs-nav"> <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="http://arsamania.com/1/0000000000_GLAV/400-250-ars-barc.jpg" alt="" width="80" height="50"></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-2"><script language="JavaScript"src="http://xdiz.ucoz.net/code.js"></script><a href="#fragment-2"><img src="http://arsamania.com/1/0000000000_GLAV/400-250-wenger.jpg" alt="" width="80" height="50"></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="http://arsamania.com/1/0000000000_GLAV/010101/400-250-barca.jpg" alt="" width="80" height="50"></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="http://arsamania.com/1/0000000000_GLAV/010101/400-250-gallas.jpg" alt="" width="80" height="50"></a></li> </ul> <!-- First Content --> <div id="fragment-1" class="ui-tabs-panel" style=""> <img src="http://arsamania.com/1/0000000000_GLAV/400-250-ars-barc.jpg" alt=""> <div class="info"> <h2><a href="http://arsamania.com/publ/3-1-0-74">"Арсенал" - "Барселона" (2:2) + Видео</a></h2>  

"Арсенал" в рамках первого матча ¼ финала Лиги чемпионов принимал на своём поле каталонскую "Барселону".</p> </div> </div> <!-- Second Content --> <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="http://arsamania.com/1/0000000000_GLAV/400-250-wenger.jpg" alt=""> <div class="info"> <h2><a href="http://arsamania.com/publ/3-1-0-73">"Бирмингем" - "Арсенал" (1:1) + Видео</a></h2>  

"Арсенал" в компенсированное время пропустил обидный гол от Кевина Филлипса.</p> </div> </div> <!-- Third Content --> <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="http://arsamania.com/1/0000000000_GLAV/010101/400-250-barca.jpg" alt=""> <div class="info"> <h2><a href="http://arsamania.com/publ/3-1-0-72">Враг у ворот… "Барселона"!</a></h2>  

Жребий в этом году свел две самые техничные команды в четвертьфинале ЛЧ, подарив фанатам футбольный праздник.</p> </div> </div> <!-- Fourth Content --> <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="http://arsamania.com/1/0000000000_GLAV/010101/400-250-gallas.jpg" alt=""> <div class="info"> <h2><a href="http://arsamania.com/publ/3-1-0-71">Проверка слуха: Вилльям Галлас</a></h2>  

Правда ли, что в следующем сезоне в обороне "Ромы" заговорят "по-английски"?</p> </div> </div> </div></div>  
<DIV align="center"><TABLE style="width: 515px; border-collapse: collapse" width="" align="" summary="null"><TBODY><TR><TD style="text-align: right; letter-spacing: 0px; word-spacing: 0px; vertical-align: middle; padding-right: 10px"><SPAN style="font-size: 8pt"></SPAN></TD></TR></TBODY></TABLE></DIV>


При копировании материала, ссылка на сайт обязательна!


Ссылка:
Категория: Скрипты для Ucoz | Просмотров: 739 | Добавил: ASSASSIN | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *:


Мы вконтакте
Как купить 100 клиентов за 100 рублей? Ответ тут!

Для красивого отображения Облака
необходим
Adobe Flash Player 9
или выше
Скачать Adobe Flash Player

Голосование
Оцените мой сайт
Результаты | Архив опросов
Всего ответов: 11
Design by WinSkin
Все права защищены


Шаблон зарегистрирован ! Копирование карается штрафом.
 sitemap • теги сайта • sitemap-forum • sitemap-shop • Теги сайта




Популярные файлы
Новые файлы