Гость
Обновленые темы Популярные темы Активные пользователи
NLC 7. Правки и модификации 10.09.2019 в 23:45 от outstanding68 Русский язык - Пробный вариант №2 (02.09.2019) 10.09.2019 в 10:30 от Admin Профильная математика - Пробный вариант №2 (09.09.2019) 10.09.2019 в 10:20 от Admin Парадокс: Начало. 09.09.2019 в 19:43 от Бармен Флудилка 08.09.2019 в 17:28 от Admin OGSR Mod 08.09.2019 в 16:34 от NL-Vincenz N.I.K.S.O.N. MOD (ТЧ) 08.09.2019 в 16:27 от NL-Vincenz Полный список предметов в переводе для STALKER ОП-2 07.09.2019 в 18:58 от Admin Call of Chernobyl: Anomaly 1.5.0 [beta] 27.08.2019 в 02:33 от Бармен Fugas Team Потерянная судьба 21.08.2019 в 14:57 от Бармен
Admin 3728

  • Страница 1 из 1
  • 1
Форум » Web-Раздел » Скрипты для uCoz » Карусель банеров для uCoz (Вращающаяся карусель из банеров)
Карусель банеров для uCoz
Admin Offline Дата: Понедельник, 07.01.2019, 09:02 | Сообщение # 1
Администратор
Звание: Новобранец [?]
Сообщений: 3728
Вращающиеся картинки банеры с эффектом карусели для установки на сайт или блог. Карусель из изображений можно применить для различных целей, может быть добавлено количество элементов крутящихся в карусели, а так же изменены размеры самого блока. Дополнительно добавлен эффект плавного мерцания, его так же можно настроить или убрать. Для работы карусели потребуется подключенная библиотека jQuery, на сайтах системы uCoz она уже подключена по умолчанию. Для установки добавьте код из примера в поле поддерживающее HTML редактирование, по умолчанию в настройках использовано расположение "по центру".

Пример кода для проверки настройки и установки
Внимание!!! в коде предоставленном ниже есть скрипт библиотеки jQuery, он выделен красным цветом. Перед установкой на сайтах uCozа, удалите скрипт библиотеки из кода. Дополнительно разными цветами выделены части элементов для добавления количества элементов в карусель.

Код
<script type="text/javascript" src="http://s36.ucoz.net/src/jquery-1.7.2.js"></script>
<style>
#block-carousel{
width:450px;
margin:0px auto;
background-color:transparent !important;
height:120px;
overflow:hidden;
}
#carousel-block{
position:relative;
width:450px;
height:120px;
float:left;
}
.carousel-foto{
height:31px;
left:0;
top:0;
width:88px;
position:relative;
margin:0px 0 0 10px;
float:left;
opacity:1;
-moz-animation: carousel-animation 2s ease-in-out 7s infinite alternate;
-webkit-animation: carousel-animation 2s ease-in-out 7s infinite alternate;
-ms-animation: carousel-animation 2s ease-in-out 7s infinite alternate;
}
@-moz-keyframes carousel-animation{
from {opacity:1;}
to {opacity:0.4;}
}
@-webkit-keyframes carousel-animation{
from { opacity:1;}
to {opacity:0.4;}
}
@-ms-keyframes carousel-animation{
from {opacity:1;}
to {opacity:0.4;}
}
@keyframes carousel-animation{
from {opacity:1;}
to {opacity:0.4;}
}
}
.carousel-element {
position:absolute;
top:auto;
bottom:0;
left:0;
}
</style>
<script src="//delaisait.ucoz.ru/script/baners/carousel/js/baner-carousel.js"></script>
<div id="block-carousel">
<div id="carousel-block">
<div class="carousel-foto">
<div class="carousel-element">
<a href="//cs-unity3d.ucoz.ru" target="_blank">
<img src="//delaisait.ucoz.ru/script/baners/carousel/img/baner-csunity3d.gif" alt="CS Unity 3D" height="31" width="88" />
</a>
</div>
</div>
<div class="carousel-foto">
<div class="carousel-element">
<a href="//delaisait.ucoz.ru" target="_blank">
<img src="//delaisait.ucoz.ru/script/baners/carousel/img/baner-delaisait.gif" alt="Делай сайт" height="31" width="88" />
</a>
</div>
</div>
<div class="carousel-foto">
<div class="carousel-element">
<a href="//shrift.ucoz.ru" target="_blank">
<img src="//delaisait.ucoz.ru/script/baners/carousel/img/baner-shrift.gif" alt="Русские шрифты" height="31" width="88" />
</a>
</div>
</div>
<div class="carousel-foto">
<div class="carousel-element">
<a href="//vk.com/merenkovmihail" target="_blank">
<img src="//delaisait.ucoz.ru/script/baners/carousel/img/baner-vk.gif" alt="Меренков Михаил ВКонтакте" height="31" width="88" />
</a>
</div>
</div>
</div> </div>


Карусель банеров в работе
Дата регистрации: 22.07.2017
Форум » Web-Раздел » Скрипты для uCoz » Карусель банеров для uCoz (Вращающаяся карусель из банеров)
  • Страница 1 из 1
  • 1
Поиск: