News Slider – это небольшой, но интересный плагин к JavaScript-библиотеке jQuery, который позволяет управлять отображением большого количества новостей на сайте при ограниченном пространстве для их демонстрации.
Небольшой пример, как всегда….

Небольшие некорректности в IE объясняются тем, что пример мне приходится демонстрировать во фрейме, ограниченном по ширине. Если Вы воспроизведете пример у себя, он будет корректно отображаться во всех браузерах. Вы можете скачать исходный код примера и воспроизвести этот пример на своем сайте.

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

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

<div class="item fl">
  <a href="/"><img src="img.gif" alt="" class="fl" /></a>
  <div class="fl">
  <a href="/">Заголовок в ссылке</a><br />
  Здесь написан текст новости...
  </div>
</div>

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

<div class="container fl"></div>

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

<div class="news_items">
  <a name="skip_to_news_1"></a>
</div>

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

<a href="#" class="prev"><img src="news_slider_prev.gif" /></a>
<a href="#" class="next"><img src="news_slider_next.gif" /></a>

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

<div class="news_slider"></div>

И наконец все это вместе опять заключено в 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.

<script type="text/javascript">
$(document).ready(function(){
  $(".misc_news").accessNews({
    newsHeadline: "Разные новости",
    newsSpeed: "normal"
  });
});
</script>

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

Ну и в заключение ссылка на источник, может кто-то захочет что-нибудь уточнить.

google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru