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

.

Как сделать динамический баннер, слайд- шоу, или ссылки на разные страницы сайта без применения технологии 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
Что такое хостинг >>>

Комментарии

1.
Андрей 13.12.2011 16:44
Понравилось. А есть какие-то еще эффекты? Где можно прочитать на русском?
2.
Александр 14.12.2011 10:30
Выложил информацию по настройке эффекта.
3.
Лена 27.12.2011 09:26
Мы хотим такое на сайт театра в Харькове. Написала в обратную связь. Заранее благодарю.
4.
Sergey 17.01.2012 14:24
B ie не работает :(
5.
Александр 17.01.2012 18:05
В IE 9.0 смотрю сейчас. работает нормально. В версиях вроде 6.0, 7.0 возможны глюки. Но ведь броузеры для того и обновляются, чтобы исправлять ошибки в обработке СТАНДАРТНОГО КОДА. Если код соответствует принятому стандарту, то страница должна выглядеть одинаково во всех броузерах.
Когда я захожу на сайты со своего iMac, и вижу проблемы с отображением, я понимаю, что разработчики не проверили совместимость с Safari, и не обращаю внимание.
К тому же существует проблема со взломом. Используя старый броузер IE 6.0 вы открываете доступ к своему компьютеру для взломщиков и ваш компьютер может стать жертвой и впоследствии работать на массовые рассылки или еще на какие-то задачи хакеров, стать частью "ботнета". Старый броузер- потенциальная "дыра" в безопасности. Даже из-за этого мы его не используем.
6.
Дмитрий 10.01.2013 23:06
У вас все такие клёвые статьи,не могли бы вы решить мою проблему с поиском по сайту,я поставил строку поиска на верх в центер и когда я нажимаю поиск все страницы сдвигаются в бог.Подскажите пжалуйста,что делать?
7.
Али 11.06.2013 07:45
Если в бог, то уже ничего не поможет
8.
Артем 11.06.2013 17:39
Столкнулся с проблемой пропадания банера в Виндовс 7, хотя в ХР все работает. Подскажите в чем может быть трабл.
9.
Денис 06.04.2014 16:48
Клевый ротатор . Прикрутил к базе данных - воще круто получилось . Спасибо !
10.
Александр 10.06.2015 20:07
Скрипт отличный!
Но работает только под Firefox.
В хроме и все, что на webkit, анимация не запускается. Висит тольть первая картинка и все.
Прошу помощи.

Добавление комментария

Имя:
Текст:
Введите цифры, изображенные на картинке
protect

Если вы хотите написать личное письмо- Обратная связь