В данной теме наглядно показано, как делать меняющиеся картинки с помощью технологии jQuery. Пример работы можете посмотреть здесь. Шаг 1.
Подготовим изображения размером 300х225 px.
Шаг 2.
Скачаем и подключим необходимые скрипты. А именно скрипт jQuery 1.3.2.js и скрипт самого эффекта jQueryCycle.js. Для подключения нам необходимо разархивировать содержимое в папку scripts в корне сайта, а также вписать между тегами <hеad></hеad> следующий код:
Code
<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.
В том месте, в котором мы хотим видеть меняющиеся изображения вставим код:
для первого эффекта:
Code
<div id="s3">
<img src="images/1.jpg" width="200" height="200" />
<img src="images/2.jpg" width="200" height="200" />
</div>
<pre style="visibility:hidden"><code class="mix">$('#s3').cycle({fx: 'zoom',
sync:0, delay: -4000 });</code></pre>
для второго эффекта:
Code
<div id="s4">
<img src="images/1.jpg" width="200" height="200" />
<img src="images/2.jpg" width="200" height="200" />
</div>
<pre style="visibility:hidden"><code class="mix">$('#s4').cycle({fx: 'scrollDown',
sync: 0, delay: -2000});</code></pre>
Всё готово... 
