jQuery плагин вертикальной автопрокрутки элементов

Отличный плагин, которым я хочу поделится, предназначен для реализации на сайте или в блоге автоматической вертикальной прокрутки элементов блока. С его помощью можно сделать ротатор слайдов, анонсов популярных новостей или статей, рекламных баннеров и т.д., практически любых блоков и элементов. Скрипт написан на jQuery и размер плагина составляет всего 3 КБ сжатая версия и 5 КБ - полная, дополнительно можно указать все необходимые параметры скорости и интервала прокрутки, установить высоту на которую будет прокручиваться элемент.
 В общем, смотрим:
DEMO
  Если понравилось, приступаем к установке, все очень просто и не займет много времени.
 HTML код его выглядит так:

<div id="wrapper">
<!--Блок(список) элементов прокрутки-->
 <ul id="sroll-block">
  <li>Блок №1</li>
  <li>Блок №2</li>
  <li>Блок №3</li>
  <li>Блок №4</li>
 </ul>
<!--Блок ссылок-кнопок управления-->
 <p><a href="#" id="previous">Предыдущие</a>/<a href="#" id="next">Следующие</a>/<a id="stop" href="#">Остановить</a>/<a id="start" href="#">Продолжить</a></p>
</div>

  В данном случаи плагином осуществляется вертикальная авто-прокрутка элементов списка, но думаю не проблема прокручивать любые другие блоки.

Блок с ссылками управления можно разместит и сверху, а можно и разделить, как это сделано в DEMO. Если данный блок не нужен, его можно не добавлять вовсе.

  С помощью стилей легко оформить весь блок и его отдельные элементы по своему усмотрению. При желании возможно придать ссылкам управления вид кнопок, используя для этого уже имеющиеся идентификаторы, настроить количество видимых блоков прокрутки от одного (Пример 1) до нескольких (Пример 2).
Вот CSS используемый на DEMO странице для "Пример 1":

#wrapper{
 padding: 30px;
 width: 270px;
 margin: 0 auto; /*выравнивание всего блока*/
}
#wrapper p {
 text-align: center;
}
#wrapper p a {
 color:#f27b00;
 text-decoration: none;
}
#wrapper p a :hover {
 color:#eab219;
}
#sroll-block{
 height: 200px; /*высота всего блока*/
 overflow: hidden;
 margin:0;
 padding: 0;
}
#sroll-block li{
 display: block;
 background: #efefef;
 color: #333;
 padding: 15px 5px; /*внутренние отступы*/
 border-bottom: 1px solid #ddd;
 text-align: center;
 font: normal bold 25px/50px Helvetica, Tahoma, serif;
 height: 170px; /*высота элемента прокрутки*/
}

В данном случаи, при настройке размеров блока необходимо учитывать что полная высота всего блока должна быть равной высоте элемента прокрутки + верхний и нижний внутренние отступы.
В данном случаи это: 200px = 170px + 15px + 15px;

 CSS в "Пример 2" для идентификаторов #sroll-block и #sroll-block li:

#sroll-block{
 height:300px; /*высота всего блока*/
 overflow:hidden;
 margin:0;
 padding:0;
}
#sroll-block li{
 display: block;
 background: #efefef;
 color: 333;
 padding: 15px 5px;
 border-bottom: 1px solid #ddd;
 text-align: center;
 font: normal bold 25px/50px Helvetica, Tahoma, serif;
 height: 70px; /*высота элемента прокрутки*/
}

Здесь полная высота элемента прокрутки составляет 100px (70px + 15px + 15px), а высота всего блока 300px и в этом случаи будут постоянно видны 3 элемента, но прокрутка осуществляется на один блок как и прежде

 Но для того чтобы заставить блок работать нужно добавить на сайт скрипты плагина и опций настройки. Не забываем о наличии подключенной к сайту библиотеки jQuery.
  Файл скрипта плагина есть в архиве исходника, который можно скачать в конце статьи, остается лишь залить его к себе на хостинг и взять ссылку. Куда интересней скрипт настройки, который для "Пример 2" выглядит так:

$(function(){
  $('#sroll-block').totemticker({
    row_height : '100px', /*высота прокрутки*/
    next : '#next',
    previous : '#previous',
    stop : '#stop',
    start : '#start',
    speed : 800, /*скорость прокрутки в миллисекундах*/
    interval : 4000, /*время паузы(задержки)*/
    mousestop : true, /*останавливать при наведении курсора - true (да) / false (нет)*/
  });
});

Значение в скрипте для row_height необходимо указывать равное полной высоте элемента прокрутки (#sroll-block li)

Для того что бы сделать вертикальную автопрокрутку элементов уже имеющегося блока достаточно лишь указать его идентификатор(селектор) в скрипте настроек вместо #sroll-block.

$(function(){
   $('#sroll-block').totemticker({
         ;***
});

СКАЧАТЬ ZIP

Источник: Totem: A Vertical Ticker jQuery Plugin

Вот собственно и все. Обсуждаем не стесняемся.

©http://magentawave.com