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