Обновленные темы Популярные темы Активные пользователи
Обновление от 8 июля, 2020 / 1.64.84.1020 0 09.07.2020 в 08:07 от 2024end Traducción española de WickedWhims 155h 0 08.07.2020 в 07:49 от 2024end Переводы модов для Sims 4 14 04.07.2020 в 17:59 от 2024end Starbound (перевод модов) 0 02.07.2020 в 12:00 от 2024end Все моды от Kiara Sims (ALL MODS) 0 29.06.2020 в 20:48 от 2024end Heroes of Annihilated Empires скачать торрент 0 29.06.2020 в 13:36 от 2024end Мод Rise of Sols mod 3.5 (Альфа) 0 29.06.2020 в 13:25 от 2024end Heroes of Annihilated Empires 3D Patch 0 29.06.2020 в 13:20 от 2024end Пак карт для Heroes of Annihilated Empires (34) 0 29.06.2020 в 13:17 от 2024end HoAE - 3D инструменты для редактирования (c2mExport) 2 29.06.2020 в 11:02 от 2024end
2024end 3959
Zero 25

  • Страница 1 из 1
  • 1
Форум — Synthira.Ru » Web-Раздел » Скрипты для uCoz » Карусель банеров для uCoz (Вращающаяся карусель из банеров)
Карусель банеров для uCoz
Администраторы
Кол-во постов: 3959
Репутация: 22
Регистрация: 22.07.2017
Статус: Не в сети
 Автор темы | Понедельник, 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
Поиск: