Небольшие некорректности в 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, либо просто целое число.

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

$("#example").slider();

Но конечно же далеко не все так просто. Для начала посмотрите пример того, как это работает, а затем мы разберем по шагам весь код, который обеспечивает работу слайдера.

Вы можете сохранить исходный код примера и при наличии у Вас библиотеки jQuery, воспроизвести его на своем сайте.

А теперь давайте разберем код. Я буду приводить только те блоки кода, на которые необходимо обратить внимание и сразу же давать пояснения, опуская незначительные в данном примере детали.
Итак, в разделе HEAD нашей страницы необходимо подключить четыре файла. Вот так:

<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/ui.mouse.js"></script>
<script type="text/javascript" src="js/ui.slider.js"></script>

Здесь первым подключается собственно библиотека jQuery, затем плагин, который отвечает за работу с размерами элементов, далее – файл, выполняющий обработку событий мышки и наконец тот самый файл, который и позволит нам создать свой слайдер.

Далее в этом же разделе HEAD включена таблица стилей. Здесь Вы можете творить, что душе угодно, но обратите особенное внимание на классы .ui-slider и .ui-slider-handle. Их не стоит переименовывать, так как именно с этими классами работает файл ui.slider.js. Все остальное не так важно – это уже дело вкуса.

Ну и наконец мы добрались до самого интересного места – кода, который создает слайдер и работает с ним. Это особенное место, поэтому здесь я приведу этот код полностью.

<script type="text/javascript">
$(document).ready(function(){
  $("#Slider").slider({
    stepping: 1,
    minValue: 0,
    maxValue: 10,
    slide: function(e,ui) {
      $("#minResult").text( ui.values[0] );
      $("#maxResult").text( ui.values[1] );
    },
    stop: function(e,ui) {
      $("#textResult").text("Выбран диапазон значений от "
      + ui.values[0] + " до " + ui.values[1]);
    }
  });
});
</script>

Код самого слайдера отделен комментариями, а начинается код очень интересной функцией

$(document).ready(function(){
...
});

которая отслеживает момент готовности DOM. С ней мы познакомимся позднее, а пока продолжим разбирать сам слайдер.
В первой строке мы в общем просто сообщаем, что слайдером будет служить некий элемент с идентификатором #Slider. И далее задаем значения шага stepping: 1, минимального и максимального значения шкалы minValue: 0 и maxValue: 10, затем сообщаем, что в момент перемещения движка надо отслеживать его значения и передавать минимальное и максимальное значения в соответственно в элементы с идентификаторами #minResult и #maxResult и в тот момент, когда Вы отпускаете клавишу мыши, в элемент с идентификатором #textResult будет вставлена строка текста, в которую будут включены окончательные минимальное и максимальное значения.
Что делать с этими значениями дальше – решать Вам самим. Можно например передать их с помощью Ajax-запроса какому-либо файлу, который обратится к базе данных, выберет необходимые значения, определенные данными, снятыми со слайдера и вернет результат обратно в браузер пользователя.
Вот так. В общем не очень сложно.