Главная » Файлы » Прочие скрипты » jQuery

Простой слайдер изображений через плагин loopedslider на jQuery для uCoz
23.06.14, 14:53:31

Скачать файл




Простой слайдер изображений для вашего сайта

Для начала посмотрите ДЕМО

Установка:

После /head на нужных страницах вставляйте:
Код
<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>


Следующий код в то место, где будет сам слайдер:
Код
<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

Материал подготовлен Apocalypse

Категория: jQuery | Добавил: Apocalypse | Теги: изображений, Через, ucoz, на, плагин, JQuery, loopedslider, простой, для, слайдер
Просмотров: 354 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: