Меню сайта
АКЦИЯ!!!
Категории раздела
Сервис
Translate my page
Выбрать язык / Select language:
Бесплатное отправление смс сообщений!
Поиск
Календарь
Архив записей
Наш опрос
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Реклама
Главная » 2014 » Сентябрь » 12 » Скрипт красивой карусели картинок для Ucoz
19:34
Скрипт красивой карусели картинок для Ucoz
Скрипт замечательной карусели изображений, отлично подойдёт для любого сайта: Установка: 1. Открываем: Панель управления ---> Управление дизайном ---> Таблица стилей (CSS), вставляем код в самый вверх: Код
div.slideshow {display: block; margin: 0px 0px 20px 0px; padding: 0px 0px 0px 0px; height: 329px;} ul.carousel {display: block; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style: none; width: 513px; height: 329px; float: left;} ul.carousel li {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; width: 513px; height: 329px;} ul.carousel li a {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-decoration: none;} ul.carousel li a img {border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border: solid 0.6em rgb(113,91,99); width: 100%; height: 100%;} .roundabout-holder {} .roundabout-moveable-item {cursor: pointer; background: none;} .roundabout-in-focus {cursor: auto;} .prev {display: block; margin: 150px 157px 0px 60px; padding: 0px 0px 0px 0px; text-decoration: none; width: 23px; height: 46px; background: url("http://fotki.ucoz.ua/file_forum/carousel/button-prev.png") no-repeat left top; float: left;} .next {display: block; margin: 150px 0px 0px 163px; padding: 0px 0px 0px 0px; text-decoration: none; width: 23px; height: 46px; background: url("http://fotki.ucoz.ua/file_forum/carousel/button-next.png") no-repeat left top; float: left;}
2. Эту часть кода вставляем в место, где должна быть наша карусель: Код
<script src="http://fotki.ucoz.ua/file_forum/carousel/carousel.js"></script> <script> $(document).ready(function() { $('ul.carousel').roundabout({ btnPrev: ".next", btnNext: ".prev", minScale: 0.4, maxScale: 1.0, minOpacity: 1.0, maxOpacity: 1.0, tilt: 0.0 }); }); </script> <div class="slideshow"> <a href="#" class="prev"></a> <ul class="carousel"> <li> <a href="##up"><img src="Адрес картинки 1" alt=""></a> </li> <li> <a href="##up"><img src="Адрес картинки 2" alt=""></a> </li> <li> <a href="##up"><img src="Адрес картинки 3" alt=""></a> </li> <li> <a href="##up"><img src="Адрес картинки 4" alt=""></a> </li> </ul> <a href="#" class="next"></a> <div style="clear: both;"></div> </div>
Вместо надписей Адрес картинки 1, 2, 3, 4 прописываем адреса своих изображений. Количество изображений можно увеличивать, для этого перед </ul> прописать код? Код
<li> <a href="##up"><img src="Адрес новой картинки" alt=""></a> </li>
Категория: Слайдеры |
Просмотров: 759 |
Добавил: master
| Теги: слайдер для сайта
| Рейтинг: 0.0 /0
Добавлять комментарии могут только зарегистрированные пользователи.
[
Регистрация |
Вход ]