Слайдер и ротаторы баннеров и ссылок

Простейший ротатор баннеров

Простейший ротатор показывает баннеры в произвольном порядке, каждый раз изменяя отображаемую картинку при открытии или обновлении (кнопка F5) страницы. Показ (ротация) баннеров в случайном порядке иногда приводит к повторению одних картинок и игнорированию других, что особенно заметно при частом обновлении страницы. Если этим дефектом пренебречь, то в целом – это довольно простой и неплохой ротатор баннеров.

Ротатор ссылок "бегущая строка"

За основу работы этого ротатора баннеров взят тег <marquee>, который создаёт эффект бегущей строки. При этом текст или иной объект перемещается по полю веб-страницы в пределах отведённого ему места:

Текст бегущей строки может быть очень большой и состоять из многих ссылок
Код для простой бегущей строки имеет вид:
<marquee>Бегущая строка</marquee>

Атрибуты бегущей строки

Дальше начинаются атрибуты тега <marquee> (атрибуты бегущей строки), которые управляют перемещением объекта в пределах поля скроллирования (поля перемещения). Перемещаемым объектом может быть не только текст, но и любое другое объектное оформление страницы, например – таблица или изображение. При этом, поддерживаются все стандартные атрибуты для форматирования стиля перемещаемых объектов. которые записываются в стандартный стайл.

Например, запись в стайл для бегущей строки с окном просмотра размером 200x66 пикселей, по которому будет перемещаться текст из нескольких строчек красного цвета с высотой шрифта 12 пикселей, будет иметь вид:
style="width:200px; height:56px; color:#FF0000; font-size:12px;"

соответственно, код для бегущей строки будет такой (как вариант):

<marquee
style="width:500px;
height:56px;
color:#FF0000;
font-size:12px;">

Бегущая строка<br />
&nbsp;&nbsp;&nbsp;&nbsp;Бегущая строка<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Бегущая строка
</marquee>

и пример работы такой строки:
Бегущая строка
    Бегущая строка
         Бегущая строка

Кроме этого, тег <marquee> имеет и свои специфические атрибуты, управляющие фоном окна просмотра, а также – направлением и стилем движения объектов. Это самые необходимые теги, которые будут использованы для создания ротатора баннеров и ссылок:

Атрибут bgcolor управляет цветом фона окна просмотра. Подобрать значение для bgcolor="#66ff33" можно в фотошопе или в любом другом графическом редакторе.

Код для бегущей строки взят из предыдущего примера, в него просто добавлен атрибут bgcolor="#BB99CC":

<marquee
bgcolor="#66ff33"
style="width:500px;
height:56px;
color:#FF0000;
font-size:12px;">
Бегущая строка<br />
&nbsp;&nbsp;&nbsp;&nbsp;Бегущая строка<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Бегущая строка
</marquee>

Пример работы кода:

Бегущая строка
    Бегущая строка
        Бегущая строка

Атрибут direction управляет направлением движения перемещения объекта или текста и принимает значения left, right, up, down, соответственно – влево, вправо, вверх, вниз.

Код
<marquee direction ="left">Бегущая строка</marquee>
<marquee direction ="right">Бегущая строка</marquee>
<marquee direction ="up">Бегущая строка</marquee>
<marquee direction ="down">Бегущая строка</marquee>
Примеры, соответственно:

Бегущая строка Бегущая строка
Бегущая строка Бегущая строка

 

Атрибут behavior определяет поведение объекта при достижении границы окна – скрыться, отразиться или остановиться, и принимает соответственные значения:

scroll – скрывание объекта
alternate – отражение объекта
slide – остановка объекта у границы поля перемещения

Код и примеры:
<marquee bgcolor="#66ff33" behavior="alternate">Ротатор ссылок</marquee>
<marquee bgcolor="#66ff33" behavior="scroll">Ротатор ссылок</marquee>
<marquee bgcolor="#66ff33" behavior="slide">Ротатор ссылок</marquee>

Чтобы эффектно просмотреть действие атрибута "behavior", нужно обновить страницу (кнопка F5)

Ротатор ссылок behavior="alternate" Ротатор ссылок behavior="scroll" Ротатор ссылок behavior="slide"


loop="4"-Контролирует время  показывания текста
scrollamount="2"-Скорость движения текста, чем больше цифра между слешем тем быстрее

Атрибуты
hspace
Горизонтальные поля вокруг контента.
loop
Задает, сколько раз будет прокручиваться содержимое.
scrollamount
Скорость движения контента.
scrolldelay
Величина задержки в миллисекундах между движениями.
truespeed
Отменяет встроенный ограничитель скорости при низких значениях атрибута scrolldelay.
vspace
Вертикальные поля вокруг содержимого.