Pull to refresh

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

Reading time 2 min
Views 5.9K
News Slider — это небольшой, но интересный плагин к JavaScript-библиотеке jQuery, который позволяет управлять отображением большого количества новостей на сайте при ограниченном пространстве для их демонстрации.

Пример: Reindel

Нам потребуется подключить в раздел HEAD страницы только два файла: библиотеку jQuery jquery-1.2.3.js и файл плагина jquery.accessible-news-slider.js





JavaScript-код этого плагина предъявляет определенные требования к организации HTML-кода новостей и их стилевого оформления, поэтому эти моменты разберем довольно подробно и начнем с HTML-кода.

Заголовок в ссылке
Здесь написан текст новости...



Каждая отдельная новость — это элемент DIV с именами классов item и fl. Внутри этот элемент может содержать картинки, ссылки, текст. Вы можете изменять стилевое оформление этих элементов, но не изменять имена классов, поскольку их использует плагин.



Все элементы DIV, содержащие новости, в свою очередь заключены в DIV с именами классов container и fl.




Все это опять заключено в DIV с именем класса news_items. Используется для организации скрытия и показа всего содержимого новостного блока.




В элементы A заключены картинки управляющие движением новостей вперед и назад.


И наконец все это вместе опять заключено в DIV с именем класса news_slider, ведь таких новостных блоков на странице может быть и несколько.

Вот такая довольно сложная иерархия, но такова воля автора.

Таблицу стилей целиком приводить не буду, отмечу лишь те моменты на которые необходимо обратить внимание.

.fl {
float:left;
display:inline;
}


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

.news_slider .item {
/* Важно!
Обязательно определяем
свойства width и
margin-right. */
width: 170px;
margin-right: 10px;
}

Важный момент, поскольку, если не определять ширину блока новости, JavaScript-код просто не сможет рассчитать расстояние для перемещения.

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


Почему именно так? Просто так посчитал нужным автор плагина. Ширина определяется таким образом, чтобы были видны одновременно две новости. В принципе можно исправить и на 3 или например на 1, но тогда придется вносить исправления в JavaScript-код, поскольку автор остановился на варианте из двух новостей, жестко определив это в коде.

Осталось разобрать только последний этап — включение в страницу кода, который собственно и вызывает News Slider.



Вот такой небольшой набор опций. Совершенно очевидно, что newsHeadline — это заголовок новостного блока, а newsSpeed — скорость с которой «скользят» новости. Это могут быть еще fast и slow, либо просто целое число.

Ist. #1 | Ist. #2
Tags:
Hubs:
+36
Comments 37
Comments Comments 37

Articles