jQuery News Slider — скользящие новости

Чтобы представить на сайте большое число новостей, можно использовать удобный инструмент News Slider.

Этот оригинальный плагин  входит в состав библиотеки jQuery, написанной для JavaScript. Данный инструмент позволяет компактно демонстрировать новостную ленту в ограниченном пространстве, не «съедая» много полезной площади экрана.

Необходимо в разделе HEAD страницы подключить два файла для успешной работы такого плагина:

непосредственно сам плагин jquery.accessible-news-slider.js, а также библиотеку jQuery jquery-1.2.3.js.

script type=text/javascript src=js/jquery-1.2.1.js/script
script type=text/javascript src=js/jquery.accessible-news-slider.js/script

Данный инструмент требует особого построения самого HTML-кода, представляющего новостной поток. Необходимо использовать особый стиль их оформления. Для этого нужно рассмотреть подробно сам код:

div class=item fl
a href=/img src=img1.gif alt= class=fl //a
div class=fl
a href=/Заглавие ссылки/abr /
Тут представлено само текстовое новостное содержание..
/div
/div

Любой из элементов DIV c наименованиями классов fl либо item представляют отдельную новость. Поскольку они используются самим плагином,

div class=container fl/div

Не меняя наименования классов можно менять стилистическое оформление данных элементов.  «Внутренность» каждого элемента можно наполнять текстами, ссылками либо картринками.

div class=news_items
a name=skip_to_news_1/a
/div

Здесь все элементы DIV, которые наполнены новостями, сами объединяются в DIV, с  именами классов fl и container.
Все они снова объединены в верхний DIV, с наименованием класса news_items. Они применяются для демонстрации или скрытия самого наполнения новостного контента.

a href=# class=previmg src=news_slider_prev.gif //a
a href=# class=nextimg src=news_slider_next.gif //a

Здесь в элементы А заключаются картинки, которые управляют перемещением новостей назад или вперед.

div class=news_slider/div

А теперь все эти элементы снова заключаются в свой DIV, но с наименованием класса news_slider. Столь многоступенчатое построение создано автором для возможности формирования скользящих фрагментов новостей. Их на экране может демонстрироваться и несколько штук.

Нужно акцентировать внимание на некоторые особенности таблицы стилей.
Селектор класса fl включает блок в плавающую модель. Используя свойство float, он перемещает его в левую сторону. Благодаря свойству display изменяется представление блочных элементов. Это дает возможность горизонтального отображения в одной линии всех элементов DIV.

fl {
float:left;
display:inline;
}
news_slider.item {
/* Внимание! Здесь необходимо определить свойства */
/* margin-right и width */
margin-right: 10px;
width: 170px;
}

Этот блок необходим, чтобы JavaScript-код смог рассчитывать расстояние для «скольжения» самой новости. Без него невозможно вычислить параметры ширины представляемого новостного блока. Показатели ширины задаются так, чтобы можно было параллельно отображать сразу 2 новости.

.news_slider .news_items {
/* Внимательно! Величина ширины будет равна .item */
/*(( margin-right + width) * 2) */
position: relative;
width: 360px;
top: 0;
left: 20px;
overflow: hidden;
}

Обеспечивать вызов News Slider будет следующий код, его необходимо включить в страницу:

script type=text/javascript
$(document).ready(function()
{
$(.misc_news).accessNews({
newsHeadline: Любые новости,
newsSpeed: normal
});
});
/script
newsHeadline здесь заголовком новостного блока будет, а скоростью «скольжения новостей» переменная newsSpeed.