Главная » 2012 » Март » 16 » JavaScript's: Простой слайдер с эффектом вертикального перелисты...
18:24 JavaScript's: Простой слайдер с эффектом вертикального перелисты... | ||||||||||||
Простой слайдер с эффектом вертикального перелистывания на jQueryСоветуем посмотреть: src="http://pagead2.googlesyndication.com/pagead/show_ads.js">  ДЕМО МАТЕРИАЛА Очень простой слайдер с эффектом перелистывания изображений. Вы можете перелистывать изображения как нажатием кнопок "вперёд" и "назад", так и колёсиком мышки. К тому же данный слайдер автоматически перелистывает изображения с указанным периодом Установка: После /head на страницах, где будет расположен данный слайдер, вставляйте: Code <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> Далее в то место, где будет сам слайдер, вставляйте: Code <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 Материал взят с сайта infoscript.ru Теги: Скачать Простой слайдер с эффектом вертикального перелистывания на jQuery
| ||||||||||||