Главная » Файлы » Прочие скрипты » jQuery |
Необычный слайдер изображений на jQuery 1.5.2
23.06.14, 14:55:23 | |
Нестандартный слайдер, который больше подойдёт для странички-портфолио. Пользователи системы uCoz не смогут его использовать из-за конфликта разных версий jQuery Для начала посмотрите ДЕМО Установка: После /head на нужных страницах вставляйте: Код <script type="text/javascript" src="/js/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="/css/style.css" /> Следующий код в то место, где будет сам слайдер: Код <div class="rm_wrapper"> <div id="rm_container" class="rm_container"> <ul> <li data-images="rm_container_1" data-rotation="-15"><img src="Ссылка на картинку"/></li> <li data-images="rm_container_2" data-rotation="-5"><img src="Ссылка на картинку"/></li> <li data-images="rm_container_3" data-rotation="5"><img src="Ссылка на картинку"/></li> <li data-images="rm_container_4" data-rotation="15"><img src="Ссылка на картинку"/></li> </ul> <div id="rm_mask_left" class="rm_mask_left"></div> <div id="rm_mask_right" class="rm_mask_right"></div> <div id="rm_corner_left" class="rm_corner_left"></div> <div id="rm_corner_right" class="rm_corner_right"></div> <h2>Fashion Explosion 2012</h2> <div style="display:none;"> <div id="rm_container_1"> <img src="Ссылка на картинку"/> <img src="Ссылка на картинку"/> <img src="Ссылка на картинку"/> <img src="Ссылка на картинку"/> </div> <div id="rm_container_2"> <img src="Ссылка на картинку"/> <img src="Ссылка на картинку"/> <img src="Ссылка на картинку"/> <img src="Ссылка на картинку"/> </div> <div id="rm_container_3"> <img src="Ссылка на картинку"/> <img src="Ссылка на картинку"/> <img src="Ссылка на картинку"/> <img src="Ссылка на картинку"/> </div> <div id="rm_container_4"> <img src="Ссылка на картинку"/> <img src="Ссылка на картинку"/> <img src="Ссылка на картинку"/> <img src="Ссылка на картинку"/> </div> </div> </div> <div class="rm_nav"> <a id="rm_next" href="#" class="rm_next"></a> <a id="rm_prev" href="#" class="rm_prev"></a> </div> <div class="rm_controls"> <a id="rm_play" href="#" class="rm_play">Play</a> <a id="rm_pause" href="#" class="rm_pause">Pause</a> </div> </div> Следующий код сразу после предыдущего: Код <script type="text/javascript" src="/js/jquery.transform-0.9.3.min_.js"></script> <script type="text/javascript" src="/js/jquery.mousewheel.js"></script> <script type="text/javascript" src="/js/jquery.RotateImageMenu.js"></script> Теперь залейте четыре скрипта из архива в папку js, стиль в папку css и все картинки в папку images Материал подготовлен Apocalypse | |
Просмотров: 451 | Загрузок: 0 | |
Всего комментариев: 0 | |
| |