Главная » 2011 » Ноябрь » 8 » Простой слайдер изображений через плагин loopedslider на jQuery (Javascript)
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
Скачать "Простой слайдер изображений через плагин loopedslider на jQuery"
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: http://siteforsites.ru/index/0-214
Категория: JavaScript's | Просмотров: 2141 | Добавил: manikom-auto | Рейтинг: 0.0/0 |
Теги: изображений, простой, loopedslider, jQuery, слайдер, плагин, На, через
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]