Главная » 2011 » Октябрь » 16 » Простой слайдер с эффектом вертикального перелистывания на jQuery (Javascript)
16.10.2011, 22:36

Простой слайдер с эффектом вертикального перелистывания на jQuery





ДЕМО МАТЕРИАЛА

Очень простой слайдер с эффектом перелистывания изображений. Вы можете перелистывать изображения как нажатием кнопок "вперёд" и "назад", так и колёсиком мышки. К тому же данный слайдер автоматически перелистывает изображения с указанным периодом

Установка:

После /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
Скачать "Простой слайдер с эффектом вертикального перелистывания на jQuery"
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: http://siteforsites.ru
Категория: JavaScript's | Просмотров: 4647 | Добавил: manikom-auto | Рейтинг: 4.0/1 |
Теги: На, jQuery, эффектом, перелистывания, простой, вертикального, слайдер
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]