Прокрутка картинок в html

Для прокрутки картинок можно использовать скрипты а можно обойтись и без них. Скрипты здесь описывать не стану, каждый хорош по своему и установка каждого стрипта специфична. Ну а для движков cms существует огромное количество плагинов. Здесь же речь пойдет о прокрутке картинок в html и мы будем использовать контейнер marquee, хотя он приводит к невалидному коду, поскольку не описан в спецификации, все браузеры его понимают.

горизонтальная прокрутка картинок

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

<marquee behavior=’scroll’ direction=’left’ height=’132′ width=’200′ scrolldelay=’5′ scrollamount=’3′><img src=’картинка1.jpg’ alt=»>&nbsp;<img src=’картинка2.jpg’ alt=»>&nbsp;<img src=’картинка3.jpg’>&nbsp;<img src=’картинка4.jpg’>&nbsp;<img src=’картинка5.jpg’></marquee> (где hqeigt=’132′ и weight=’200′ ширина и высота всех картинок)

Здесь вставлено пять картинок (можно вставлять слова, предложения), разделителем между каринками является спецсимвол &nbsp; можно использовать прозрачный gif шириной в нужное количество пикселей.

прокрутка картинок слева направо и обратно

<marquee behavior=’alternate’ direction=’left’ height=’132′ width=’500′ scrolldelay=’1′ scrollamount=’9′ hspace=’10’ vspace=’10’> <img src=’картинка1.jpg’ alt=»>&nbsp;<img src=’картинка2.jpg’ alt=»>&nbsp;<img src=’картинка3.jpg’>&nbsp;<img src=’картинка4.jpg’>&nbsp;<img src=’картинка5.jpg’> </marquee>

вариант вертикальной прокрутки

<marquee behavior=’scroll’ direction=’up’ height=’200′ width=’195′ scrolldelay=’1′ scrollamount=’3′ hspace=’10’ vspace=’10’><p><img src=’img1.jpg’ alt=»></p><p><img src=’img2.jpg’ alt=»></p><p><img src=’img3.jpg’></p><p><img src=’img4.jpg’></p><p><img src=’img5.jpg’></p></marquee>

Обратите внимание теги внутри контейнера которые и задают параметры движения, к описанию коих мы сейчас и перейдем.

1
behavior
как будут двигаться картинки или содержимое

a) alternate — туда — сюда

b)
scroll — только в заданном направлении до бесконечности

с) slide — двигается в заданном направлении до упора и встает

Синтаксис: —<marquee behavior=’scroll’

2
direction
здесь задаем направление движения

a) down — сверху вниз

b) up — снизу вверх

c) left — на лево

d) right — направо

Синтаксис — <marquee direction=’left’

3) loop=’x’ — сколько раз сделать прокрутку, после чего картинка замрет в конечной точке, где x-целое число, без данного параметра работает без ограничений

4)

scrollamount=’х’
— параметр задает скорость прокрутки, где х— целое число

5)  scrolldelay=’x’

— величина задержки между движениями картинки или текста, где х- целое число. Без данного параметра задается величина по умолчанию 4, при больших величинах возможно дергание картинок, при еще больших задержках и увеличении скорости прокрутки будет что то типа слайд шоу

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

Ну и еще используем несколько стандартных тегов с которыми вы уже знакомы height— высота окна, width— ширина окна прокрутки, hspace, vspace