Автоскроллер новостей на Ucoz
На форуме у меня попросили сделать вертикальный скроллер новостей, который прокручивался автоматически.
Так как ничего сложного в этом нет, предлагаю Вам решение этого вопроса.
Демо
1. Итак, для начала заходим в панель управления - Информеры и создаем информер Новостей или Каталога статей, либо любого другого модуля - это не принципиально. Выбирайте то, что нужно именно Вам. Количество материалов ставьте столько, сколько хотите видеть всего в скроллере.
Я в своем примере использовала каталог статей и количество материалов 10
2. Теперь давайте зададим шаблон информера.
-
$TITLE$
$MESSAGE$
<li>
<div class="info"><a href="$ENTRY_URL$">$TITLE$</a>
$MESSAGE$</div>
<div style="clear:both;"></div>
</li>
У Вас шаблон может иметь и другой вид. Главное, чтобы содержимое, которое должно выводиться в анонсах обрамлялось тегами
<div style="clear:both;"></div>
3. Информер готов. Теперь его надо ставить в нужное место на сайте следующим способом:
$MYINF_№$
<div class="newsticker-jcarousellite">
<ul>
$MYINF_№$
</ul>
</div>
4. И остался последний момент. Нужно добавить скрипты, которые будут этот информер прокручивать.
Для этого скачиваем этот скрипт
Скачать скрипт
и закачиваем через Файловый менеджер к себе на сайт. Запоминаем ссылку на него
5. Теперь надо вызвать его в нужном месте.
Если Вы размещаете скроллер, например, в одном из глобальных блоков, который будет выводится на всех страницах, но нижеприведенные строки лучше всего вставить в шапке между и . Если же скроллер будет выводиться только на одной странице, то лучше вставить эти строки просто над кодом, приведенном в пункте 3.
А вот сами эти строки
url] type="text/javascript">
<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 - время, в течении которого, происходит скролл
Вот и все. Все просто и понятно.
Удачи!
Опубликованои на http://otlichnica.com/publ/20-1-0-3372
А чтобы анонсы, пока загружается страница не налезали друг на друга, перед надо добавить
- и