Гость
Обновленые темы Популярные темы Активные пользователи
OpenXRay 1 10.11.2019 в 08:25 от Admin Усовершенствование "тем", "ответов"... 0 05.11.2019 в 22:49 от Admin Активность в Ваших темах для uCoz 0 05.11.2019 в 22:44 от Admin Дополнительный смайлы для форума uCoz 0 05.11.2019 в 22:40 от Admin Край изумрудной зари 2 02.11.2019 в 16:09 от Admin Арты: Сталкер, апокалипсис, зона, конец света и прочее 54 29.10.2019 в 18:01 от Admin Плееры фильмов для киносайтов 0 28.10.2019 в 18:13 от Admin Шаблон Games-Survarium для uCoz 0 19.10.2019 в 18:27 от Admin Шаблон GameScope для uCoz 0 19.10.2019 в 18:21 от Admin Шаблон Fight Club для uCoz 0 19.10.2019 в 17:50 от Admin
Admin 3795

  • Страница 1 из 1
  • 1
Форум — Synthira.Ru » Web-Раздел » Скрипты для uCoz » Карусель банеров для uCoz (Вращающаяся карусель из банеров)
Карусель банеров для uCoz
Admin (Не в сети)
Администраторы
Сообщений: 3795
 Автор темы | Понедельник, 07.01.2019, 09:02 | Сообщение # 1
Вращающиеся картинки банеры с эффектом карусели для установки на сайт или блог. Карусель из изображений можно применить для различных целей, может быть добавлено количество элементов крутящихся в карусели, а так же изменены размеры самого блока. Дополнительно добавлен эффект плавного мерцания, его так же можно настроить или убрать. Для работы карусели потребуется подключенная библиотека 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>


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