Сделать динамический баннер без FLASH
  

Сделать динамический баннер без FLASH06.12.2011 00:00

.

Как сделать динамический баннер, слайд- шоу, или ссылки на разные страницы сайта без применения технологии Adobe Flash? Применив другую технологию, JavaScript. А точнее, фреймворк, библиотеку функций Jquery.

Загрузка

Для начала - ссылка на сайт со скриптом Cycle - http://jquery.malsup.com/cycle/. Если у вас не получилось скачать скрипт, в конце статьи будут ссылки с моего сайта. Если вы не смогли найти страницу загрузки, вот прямая ссылка: http://jquery.malsup.com/cycle/download.html.

Установка

Код может состоять из двух частей - в заголовке страницы <HEAD> разместить скрипты и настройки, а в <BODY> - непосредственно картинки. А можно сделать все вместе (как на этой странице), и должно работать.

Вот весь код:

<script src="/jquery/jquery.js" type="text/javascript"></script>
<script src="/jquery/jquery.cycle.all.js" type="text/javascript"></script>

<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
    $('.cycle_div').cycle({
    fx:     'scrollHorz', 
    delay:   1000, 
    speed:   500, 
		timeout: 2000,    
	});
	
});
// ]]></script>


<div class="cycle_div" style="width: 200px; height: 300px; overflow: hidden; ">
<a href="#"><img src="/cycle1.gif" alt="" border="0" /></a> 
<a href="#"><img src="/cycle2.jpg" alt="" border="0" /></a> 
<a href="#"><img src="/cycle3.jpg" alt="" border="0" /></a>
</div>
      

Кто может сам установить код, вам дальше читать не обязательно. Подключаем библиотеку Jquery, а в следующей строке- плагин Cycle

<script src="/jquery/jquery.js" type="text/javascript"></script>
<script src="/jquery/jquery.cycle.all.js" type="text/javascript"></script>

Для того, чтобы плагин работал, нужно указать ему, в каком месте страницы установлен <DIV> с картинками, а также указать с какими параметрами показывать слайды. 

<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
    $('.cycle_div').cycle({
    fx:     'scrollHorz', 
    delay:   1000, 
    speed:   500, 
		timeout: 2000,    
	});
	
});
// ]]></script>

Здесь '.cycle_div' - это ссылка на <div class="cycle_div">, у вас может быть любое название блока.

А теперь - тестовый блок, который вы, само собой, замените на свой код. 

<div class="cycle_div" style="width: 200px; height: 300px; overflow: hidden; ">
<a href="#"><img src="/cycle1.gif" alt="" border="0" /></a> 
<a href="#"><img src="/cycle2.jpg" alt="" border="0" /></a> 
<a href="#"><img src="/cycle3.jpg" alt="" border="0" /></a>
</div>

Для того, чтобы картинки даже случайно не выпали за границу блока, я установил четкие размеры блока и установил действие при переполнениее- скрыть все, что не влезло в блок: style="width: 200px; height: 300px; overflow: hidden; " . Здесь, в примере, картинки не просто плавно сменяются, они являются ссылками.

 

Если вы не смогли по каким-то причинам скачать плагин, вот ссылка с моего сайта: http://shulga.in.ua/jquery/jquery.cycle.all.js

Список эффектов можно посмотреть на странице  http://jquery.malsup.com/cycle/browser.html.

Настройка

Где и как прописать эффекты:

    $('.cycle_div').cycle({
    fx:     'scrollHorz', 
    delay:   1000, 
    speed:   500, 
    timeout: 2000,    
	});

fx: 'scrollHoriz',  - это как раз и есть эффект. В демонстрации выше использованы эффекты: scrollHoriz, fade, fadeZoom.

Настройка скорости эффекта, времени остановки, а также первичной задержки:

delay: 1000 - ПЕРЕД тем как запустить эффект в первый раз, подождать 1 секунду;
speed: 500 - картинка сменяется на другую в течение 0.5 секунд;
timeout: 2000 - показать картинку 2 секунды

Теперь вы можете самостоятельно установить и настроить данный плагин у себя на сайте.

<<< Добавить на сайт карту от Yandex.Карты через API
Что такое хостинг >>>