Новостной слайдер

Прокручивает список новостей автоматически или же можно принудительно прокручивать новости с помощью стрелочек. Ни чего лишнего, можно встроить в любой дизайн. Используется плагин jcarousellite.

HTML

<img src="news-arrow-previous.png" class="previous" />
<div id="newsticker-demo">
 <ul>
   <li>
        <p>
            <span class="title">Инфо: </span><a href="http://www.pcvector.net">Хотите увидеть новые скрипты?</a><br>
            Посетите нашу главную страничку.
           </p>
   </li>
   <li>
           <p>
               <span class="title">Поиск: </span><a href="http://www.pcvector.net">Ищите определенный скрипт?</a><br>
            У нас скрипты разделены по категориям.
        </p>
   </li>
   <li>
           <p>
               <span class="title">Помощь: </span><a href="http://www.pcvector.net">Нужна помощь?</a><br>
            Оставьте свой вопрос в комментарии к скрипту.
        </p>
   </li>
   <li>
           <p>
               <span class="title">Ухты: </span><a href="http://www.pcvector.net">Навигация?</a><br>
            У нас много прикольных менюшек.
        </p>
   </li>
 </ul>
</div>
<img src="news-arrow.png" class="next" />

CSS

#newsticker-demo {
    width:300px;
    height: 225px;
    font-style:italic;
    overflow:hidden;
    border-top: 1px solid #dddddd;
}
#newsticker-demo .title {
    font-size:14px;
    font-weight:bold;
    padding:5px;
}
#newsticker-demo p {
    margin:0px;
    padding: 10px 0px 0px 20px;
}
#newsticker-demo ul {}
#newsticker-demo li {
    list-style:none;
    display:block;
    padding:7px 0px;
    border-bottom: 1px solid #dddddd;
    height:60px;
    font-family: Arial;
    font-size:12px;
}
#newsticker-demo li a {
    color:red;
}
.previous {
    outline:none;
    cursor:pointer;
    margin-left:145px;
    vertical-align: bottom;
}
.next {
    outline:none;
    cursor:pointer;
    margin-left:145px;
    vertical-align: top;
}

JS

Подключаем jQuery, плагин jcarousellite и вызываем его:

<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="jcarousellite_1.0.1c4.js" type="text/jаvascript"></script>
<script type="text/jаvascript">
$(function() {
    $("#newsticker-demo").jCarouselLite({
        vertical: true,
        hoverPause:true,
        btnPrev: ".previous",
        btnNext: ".next",
        visible: 3,
        auto:3000,
        speed:500
    });
});
</script>