В этом примере показано как создаётся информационный блок в котором текст и картинки будут изменяться с эффектом скроллинга благодаря jQuery.
Для реализации такого блока вам понадобиться, библиотека jQuery и плагин эффекта jQueryCycle скачайте исходник там всё есть.
Подключаем библиотеку и плагин, следующий код должен находиться между тегами .
$.fn.cycle.defaults.timeout = 6000; $(function() { $('td pre code').each(function() { eval($(this).text()); }); });
Вставим в документ такую таблицу с нужной вам ширенной
| Здесь будет меняющийся информационный блок |
Теперь вставьте между
следующий код .
Тут содержание блока 1. Тут содержание блока 2. Тут содержание блока 3.
$('#s6').cycle({ fx: ' scrollLeft ', timeout: 6000, delay: -2000 });В места ‘Тут содержание блока’ поместите ваш текст , картинки ,ссылки в общем что хотите.
Для изменения эффекта скроллинга то есть направления движения содержания в блоке, изменяйте параметр fx: на значения scrollUp, scrollDown, scrollRight, scrollLeft.
Значение timeout – это время задержки кадра в миллисекундах, также измените на нужное вам.
И конечно прикрепите таблицу стилей с которой вы придадите внешний вид информационному блоку, но обязательно вставьте туда следующее.
Исходник: 