Автоскроллер новостей на Ucoz

Автоскроллер новостей на UcozНа форуме у меня попросили сделать вертикальный скроллер новостей, который прокручивался автоматически.
Так как ничего сложного в этом нет, предлагаю Вам решение этого вопроса.

Демо

1. Итак, для начала заходим в панель управления — Информеры и создаем информер Новостей или Каталога статей, либо любого другого модуля — это не принципиально. Выбирайте то, что нужно именно Вам. Количество материалов ставьте столько, сколько хотите видеть всего в скроллере.
Я в своем примере использовала каталог статей и количество материалов 10
2. Теперь давайте зададим шаблон информера.
Code<li>
<div class=»info»><a href=»$ENTRY_URL$»>$TITLE$</a>
$MESSAGE$</div>  
  <div style=»clear:both;»></div>  
</li>
У Вас шаблон может иметь и другой вид. Главное, чтобы содержимое, которое должно выводиться в анонсах обрамлялось тегами <li> и </li>

А чтобы анонсы, пока загружается страница не налезали друг на друга, перед надо добавить
Code <div style=»clear:both;»></div>
3. Информер готов. Теперь его надо ставить в нужное место на сайте следующим способом:
Code
<div class=»newsticker-jcarousellite»>  
  <ul>  
$MYINF_№$
</ul>
</div>

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

Скачать скрипт 
и закачиваем через Файловый менеджер к себе на сайт. Запоминаем ссылку на него

5. Теперь надо вызвать его в нужном месте.
Если Вы размещаете скроллер, например, в одном из глобальных блоков, который будет выводится на всех страницах, но нижеприведенные строки лучше всего вставить в шапке между <head> и </head> . Если же скроллер будет выводиться только на одной странице, то лучше вставить эти строки просто над кодом, приведенном в пункте 3.
А вот сами эти строки
Code
<script src=»http://otlichnica.ucoz.ru/js/jcarousellite_1.0.1c4.js» type=»text/javascript»></script>  
<script type=»text/javascript»>  
$(function() {
  $(«.newsticker-jcarousellite»).jCarouselLite({
  vertical: true,
  hoverPause:true,
  visible: 3,
  auto:1500,
  speed:2000
  });
});
</script>  

Адрес скрипта замените на свой (пункт 4)
Настройки:
vertical — вертикальный скроллер
hoverPause — при наведении на него он останавливается
visible — количество анонсов , видимых одновременно
auto — время, через которое, происходит скролл
speed — время, в течении которого, происходит скролл

Вот и все. Все просто и понятно.
Удачи!

Комментарии на Facebook