Красивый эффект смены картинок на jQuery

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

$('#s3').cycle({fx:    'zoom',
        sync:0, delay: -4000 });
 
$('#s4').cycle({fx:    'scrollDown', 
        sync: 0, delay: -2000});

Итак, начнем:

Шаг 1.

Подготовим изображения размером 200х200 px. Скачать используемые в примере можно здесь. Скопируем их в корневую папку сайта images.

Шаг 2.

Скачаем и подключим необходимые скрипты. А именно скрипт 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>

Шаг 3.

В том месте, в котором мы хотим видеть меняющиеся изображения вставим код:

для первого эффекта:

<div id="s3">
<img src="images/1.jpg" width="200" height="200" />
<img src="images/2.jpg" width="200" height="200" />
</div>
<pre><code class="mix">$('#s3').cycle({fx: 'zoom',
sync:0, delay: -4000 });</code></pre>

или:

<div id="s4">
<img src="images/1.jpg" width="200" height="200" />
<img src="images/2.jpg" width="200" height="200" />
</div>
<pre><code class="mix">$('#s4').cycle({fx: 'scrollDown',
sync: 0, delay: -2000});</code></pre>

...для второго.

Шаг 4.

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

PRE {
DISPLAY: none
}

Готово!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.malsup.com
Перевел: Сергей Патин
Урок создан: 24 Февраля 2009
Просмотров: 64070
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^