| Главная » Файлы » Прочие скрипты » jQuery |
Простой слайдер с эффектом вертикального перелистывания на jQuery
| 23.06.14, 09:27:00 | |
 Очень простой слайдер с эффектом перелистывания изображений. Вы можете перелистывать изображения как нажатием кнопок "вперёд" и "назад", так и колёсиком мышки. К тому же данный слайдер автоматически перелистывает изображения с указанным периодом Для начала посмотрите ДЕМО (Первый слайдер) Установка: После /head на страницах, где будет расположен данный слайдер, вставляйте: Код <script type="text/javascript" src="/js/jquery.mousewheel.js"></script> <script type="text/javascript" src="/js/jquery.ulslide.js"></script> <style type="text/css"> #slide2-pager { clear:both; list-style-type:none; overflow:hidden; margin:0; padding:0; } #slide2-pager li { float: left; } #slide2-pager li a{ margin:0 2px; padding:0 7px; border:1px solid #ccc; display:inline-block; } #slide2-pager li a.usl-current{ text-decoration: underline; background-color: #777; } </style> Далее в то место, где будет сам слайдер, вставляйте: Код <a href="#" id="slide1_prev">« prev</a> | <a href="#" id="slide1_next">next »</a> <ul id="slide1"> <li> <img src="Ссылка на картинку" alt="" /> </li> <li> <img src="Ссылка на картинку" alt="" /> </li> <li> <img src="Ссылка на картинку" alt="" /> </li> <li> <img src="Ссылка на картинку" alt="" /> </li> <li> <img src="Ссылка на картинку" alt="" /> </li> </ul> <script type="text/javascript"> $(function() { $('#slide1').ulslide({ statusbar: true, width: 443, height: 300, bnext: '#slide1_next', bprev: '#slide1_prev', axis: 'y', mousewheel: true, duration: 500, autoslide: 3000 }); }); </script> Осталось лишь залить два скрипта из прикреплённого архива в папку js Материал подготовлен Apocalypse | |
| Просмотров: 463 | Загрузок: 0 | | |
| Всего комментариев: 0 | |
|
| |