| Главная » Файлы » Прочие скрипты » HTML5 |
3D карусель без ипользования Flesh
| 24.06.14, 09:39:04 | |
 Для начала смотрим Демо Возможности скрипта: Данный скрипт прекрасно работает во всех популярных браузерах (в том числе и в IE начиная с IE6) Прокрутка осуществляется автоматически с промежутком который вы сами установите,так же прокрутить можно с помощью колёсика мыши(к сожалению IE не поддерживает эту функцию) и при помощи кнопок навигации. При щелчке мыши по картинке она плавно открывается в модальном окне. Скрипт лёгок в установке и подстройке под свой дизайн сайта. Итак начнём установку и попутно разберём важные функции которые понадобятся для настройки под ваш дизайн! 1)Качаем архив и заливаем в файловый менеджер не меняя структуры: 2)Далее между: Код <head></head> Ставим этот код: Код <link rel="stylesheet" type="text/css"href="/css/carousel.css"> <link rel="stylesheet" type="text/css" href="/slimbox/slimbox2.css"> <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/JavaScript" src="/js/carousel.js"></script> <script type="text/JavaScript" src="/js/cloud-carousel.1.0.4.min.js"></script> <script type="text/JavaScript" src="/js/jquery.mousewheel.min.js"></script> <script type="text/JavaScript" src="/slimbox/slimbox2.js"></script> Теперь разбирем скрипт carousel.js:(смотрим коментарии) Код $(document).ready(function(){ $("#carousel1").CloudCarousel( { xPos: 495, //Позиция по оси х yPos: 100, //Позиция по оси х buttonRight: $("#buttonLeft"), //Отвечает за кнопки навигации buttonLeft: $("#buttonRight"), //Отвечает за кнопки навигации autoRotate: 'right', //Напрвавление вращения (right или left ) autoRotateDelay: 3000, //Скорость смены картинок (3 секунды ) speed: 0.1, //Скорость вращения слайдера (от 0.1 до 0.3) reflHeight: 50, //Длина отражения изображений reflOpacity: 0.5, //Прозрачност отражения изображений yRadius: 110, //Радиус окражности карусели mouseWheel: true //Отвечает за вращение колесом мыщи } ); }); В остольные скрипты без отличных знаний JavaScript лезть не стоит. Сам слайдер состоит из одной картинки и двух кнопок управления,их вы легко сможите переделать под свой дизайн. 3)В то место где хотим видеть слайдер ставим этот код: Код <div id="carousel1"> <div id="innerCarousel"> <a href="/img/carousel/1_big.jpg" rel="lightbox"><img class="cloudcarousel" src="/img/carousel/1.jpg" alt="картинка" /></a> <a href="/img/carousel/2_big.jpg" rel="lightbox"><img class="cloudcarousel" src="/img/carousel/2.jpg" alt="картинка" /></a> <a href="/img/carousel/3_big.jpg" rel="lightbox"><img class="cloudcarousel" src="/img/carousel/3.jpg" alt="картинка" /></a> <a href="/img/carousel/4_big.jpg" rel="lightbox"><img class="cloudcarousel" src="/img/carousel/4.jpg" alt="картинка" /></a> <a href="/img/carousel/5_big.jpg" rel="lightbox"><img class="cloudcarousel" src="/img/carousel/5.jpg" alt="картинка" /></a> <a href="/img/carousel/6_big.jpg" rel="lightbox"><img class="cloudcarousel" src="/img/carousel/6.jpg" alt="картинка" /></a> <a href="/img/carousel/7_big.jpg" rel="lightbox"><img class="cloudcarousel" src="/img/carousel/7.jpg" alt="картинка" /></a> <a href="/img/carousel/8_big.jpg" rel="lightbox"><img class="cloudcarousel" src="/img/carousel/8.jpg" alt="картинка" /></a> <a href="/img/carousel/9_big.jpg" rel="lightbox"><img class="cloudcarousel" src="/img/carousel/9.jpg" alt="картинка" /></a> <a href="/img/carousel/10_big.jpg" rel="lightbox"><img class="cloudcarousel" src="/img/carousel/10.jpg" alt="картинка" /></a> </div> <div id="buttonLeft"></div> <div id="buttonRight"></div> </div> Если что то не понятно, то открываем исходный код на демо странице и смотрим! По всем вопросам пишем в коментарии или на форум! Желаю удачи. | |
| Просмотров: 611 | Загрузок: 0 | | |
| Всего комментариев: 0 | |
|
| |