Гость
Обновленные темы Популярные темы Активные пользователи
Тактический полигон [ЧН] 2 04.04.2020 в 10:11 от 2024end Внутренняя оптимизация сайта на ucoz. 1 02.04.2020 в 20:05 от Terrorist Битая ссылка 14 01.04.2020 в 17:58 от 2024end Создание типовых квестов 3 30.03.2020 в 15:13 от 2024end S.T.A.L.K.E.R. - UE4 0 29.03.2020 в 16:19 от Бармен S.T.A.L.K.E.R - Группа Cтрелка 0 22.03.2020 в 16:41 от Бармен Школы для The Sims 4 0 20.03.2020 в 09:36 от 2024end Хроники Кайдана 0 16.03.2020 в 00:17 от Бармен Игра Душ - Новое Начало 0 15.03.2020 в 13:28 от Бармен «Doomed to Eternal Torment» - Обречённый на вечные муки 1 15.03.2020 в 12:53 от Бармен
2024end 3871

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