Сегодня мы научимся делать меняющийся информационный блок на jQuery.

Пример работы этого блока Вы можете посмотреть ЗДЕСЬ.

Шаг 1.

СКАЧАЕМ и подключим необходимые скрипты. А именно скрипт jQuery 1.2.6.js и скрипт самого эффекта jQueryCycle.js. Для подключения нам необходимо разархивировать содержимое в папку scripts в корне сайта, а также вписать между тегами <hеad></hеad> следующий код:

Код:
<script type="text/javascript" src="scripts/jQuery 1.2.6.js"></script>

  <script type="text/javascript" src="scripts/jQueryCycle.js"></script>

  <script type="text/javascript">

  $.fn.cycle.defaults.timeout = 6000;

  $(function() {

$('td pre code').each(function() {

eval($(this).text());

});

});

</script>

Шаг 2.

Вставим в документ таблицу, с нужной нам шириной блока. В моем случае это 300 px.

Код:
<table width="300" border="0">

<tr>

<td>Здесь будет меняющийся информационный блок</td>

</tr>

</table>

Шаг 3.

Теперь вместо надписи из предыдущего шага вставим код скрипта:

 

Код:
<div id="s6">

  <div>

  Страница 1.

  </div>

  <div>
 
  Страница 2.
  

  </div>

  <div>
 
  Страница 3.
  

  </div>

  </div>

  <pre><code class="mix">$('#s6').cycle({

  fx:     'scrollUp',

  timeout: 6000,

  delay:  -2000

  });</code></pre>

Вместо слов "Страница 1, 2, 3" можете вставить любой текст, картинки, ссылки и т.п.

Изменяя параметр "fx:" на значения scrollUp, scrollDown, scrollRight, scrollLeft, можете добиться нужного направления анимации блока.

Значение timeout - это время задержки одного кадра в милисекундах. Его вы тоже можете изменять по своему усмотрению.

Шаг 4.

В таблице стилей создадим стиль для тега <pre>

Код:
PRE {

DISPLAY: none

}

Готово!

Урок подготовлен: http://ruseller.com
Источник урока: wwwmalsup.com