08.11.2011, 20:26 | |||||
Простой слайдер изображений через плагин loopedslider на jQueryДЕМО МАТЕРИАЛА Установка: После /head на нужных страницах вставляйте: Code <script src="/js/loopedslider.js" type="text/javascript" charset="utf-8"></script> <style type="text/css" media="screen"> .container2 { width:600px; height:393px; overflow:hidden; position:relative; cursor:pointer; } div.slides { position:absolute; top:0; left:0; } ul.slides { position:absolute; top:0; left:0; list-style:none; padding:0; margin:0; } div.slides div,ul.slides li { position:absolute; top:0; width:600px; display:none; padding:0; margin:0; } /* * Optional */ #loopedSlider,#newsSlider { margin:0 auto; width:600px; position:relative; clear:both; } ul.pagination { list-style:none; padding:0; margin:0; } ul.pagination li { float:left; } ul.pagination li a { padding:2px 4px; } ul.pagination li.active a { background:blue; color:white; } </style> Следующий код в то место, где будет сам слайдер: Code <div id="loopedSlider"> <div class="container2"> <div class="slides"> <div><img src="Ссылка на картинку" width="600" height="393" alt="First Image" /></div> <div><img src="Ссылка на картинку" width="600" height="393" alt="First Image" /></div> <div><img src="Ссылка на картинку" width="600" height="393" alt="First Image" /></div> <div><img src="Ссылка на картинку" width="600" height="393" alt="First Image" /></div> </div> </div> <a href="#" class="previous">previous</a> <a href="#" class="next">next</a> <ul class="pagination"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul> </div> <script type="text/javascript" charset="utf-8"> $(function(){ $('#loopedSlider').loopedSlider({ autoStart: 3000 }); $('#newsSlider').loopedSlider({ autoHeight: 400 }); }); </script> Осталось лишь залить скрипт из прикреплённого архива в папку js Материал взят с сайта infoscript.ru
Теги: Скачать Простой слайдер изображений через плагин loopedslider на jQuery
| |||||
Категория: JavaScript's | Просмотров: 2141 | Добавил: manikom-auto | Рейтинг: 0.0/0 | | |||||
Теги: |
Пока комментариев нет. Ты можешь быть первым! | |
Кроме того, материал перепечатывали с сайта на сайт, ставили... файл можно найти на Вэбочке (название tables_tablichki_dli_foruma.js).