На этом шаге мы рассмотрим определение переменных, которые будут использоваться при прокрутке.
Так как со временем видимость элементов новостей будет изменяться, нам требуется способ, с помощью которого легко можно было бы узнать, какие элементы видимы и где они находятся. Сначала мы определим значения двух переменных, одна из них будет хранить индекс текущего видимого заголовка, а вторая - индекс заголовка, который только что был прокручен за пределы области видимости. Изначально обе переменные имеют значение 0.
var currentHeadline = 0, oldHeadline = 0;
Затем следует побеспокоиться о начальном позиционировании заголовков. Напомним, что в таблице стилей мы уже установили свойство top заголовков в значение, на 10 пикселей превышающее значение свойства height контейнера, а так как свойство overflow контейнера имеет значение hidden, изначально заголовки не отображаются. Если сохранить начальное значение для данного свойства в переменной, позднее нам проще будет перемещать заголовки в эту позицию.
var hiddenPosition = $container.height() + 10;
Кроме того, нам необходимо, чтобы первый заголовок отображался сразу же после первоначальной загрузки страницы. Для этого мы можем установить свойство top равным 0.
$('div.headline').eq(currentHeadline).css('top', 0);
Теперь область прокрутки на странице находится в требуемом начальном состоянии, как показано на рисунке 1.
Рис.1. Область прокрутки находится в требуемом начальном состоянии
Полный текст этого примера можно взять здесь.Наконец, мы сохраним общее количество заголовков для последующего использования и определим переменную, где будет храниться предельное время ожидания, для оформления паузы между циклами прокрутки.
var headlineCount = $('div.headline').length;
var pause;
В данный момент нет необходимости определять значение переменной pause - оно будет устанавливаться всякий раз перед сменой заголовка. Однако мы всегда должны объявлять локальные переменные с помощью ключевого слова var, чтобы избежать опасности конфликта имен с глобальными переменными.
На следующем шаге мы рассмотрим функцию прокрутки заголовков.
