Библиотека jQuery – это очень хорошее решение многих проблем. jQuery можно использовать для расширения возможностей сайта и в тоже время упростить процесс. jQuery плагин цикла позволяет очень легко и быстро создать слайд-шоу любой сложности. В этом уроке мы, как раз и будем создавать слайд-шоу. После изучения урока Вы увидите, что процесс создания проходит очень интересно и самое главное быстро.
Перед началом прохождения урока, Вам необходимо скачать библиотеку jQuery и плагин jQuery Cycle.
Шаг №1. Создаем HTML каркас
Так как в примере я не вижу смысла создавать сложный дизайн, мы будем использовать очень легкие HTML и CSS макеты. HTML код будет, например, таким:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""l1/DTD/xhtml1-transitional.dtd"> <html xmlns="l"> <head> <title> JQuery Слайд-шоу </title> <link rel="stylesheet" type="text/css" media="screen" href="screen.css" /> </head> <body> <div id="myslides"> <img src="/images/capitol.jpg" /> <img src="/images/flowers.jpg" /> <img src="/images/countryscene.jpg" /> </div> </body> </html>
Как Вы можете заметить, я создал очень простой макет слайд-шоу, который состоит из простого тега div с идентификатором "myslides". Важно! Все картинки, из которых будет состоять слайд-шоу, необходимо поместить в один тег div.
Шаг №2. Создание таблиц стилей CSS
Далее, конечно, займемся CSS стилями.
body { background: rgb(50,50,50); } #myslides { width: 370px; height: 220px; padding: 0; margin: 0 auto; } #myslides img { padding: 10px; border: 1px solid rgb(100,100,100); background-color: rgb(230,230,230); width: 350px; height: 200px; top: 0; left: 0 }
Итак, что же мы сделали? Главное, нам необходимо убедится, что контейнер div с идентификатором "myslides" имеет фиксированную высоту и ширину. В этом примере мы установили высоту и ширину элемента myslides равную высоте и ширине изображений.
Теперь давайте посмотрим, что у нас должно получиться.
Шаг №4. JavaScript код
Сейчас переходим к самой интересной части нашего урока. Для того чтобы слайд-шоу заработало сначала необходимо подключить библиотеку jQuery и плагин jQuery Cycle. Между тегами <head> вставьте следующий код:
<script type="text/javascript" src="js/jquery-1.4.2.js"></script> <script type="text/javascript" src="js/jquery.cycle.all.js"></script>
Ниже разместим, маленький скрипт, который позволяет запустить эффект.
<script type="text/javascript"> $(document).ready(function(){ $(‘#myslides’).cycle(); }); </script>
Первая линия написанного сценария, создает название функции. Вторая линия, вызывает элемент myslides и передает его в цикл. Вот и все! Если заново откроете HTML файл слайд-шоу, то уже увидите слайд шоу. Но на этом еще не все. До сих пор мы создали стандартный переход, далее мы будем его улучшать.
Настройка слайд-шоу
Сейчас мы посмотри, как изменить переход в слайд шоу. Я собираюсь показать, как можно изменить скорость перехода и изменить сам переход.
Настройка плагина очень проста. Если Вы хотите изменить переход, то необходимо чуть-чуть изменить код скрипта.
$(‘#myslides’).cycle({ fx: ‘cover’ });
Теперь мы зададим время перехода.
$(‘#myslides").cycle({ fx: ‘cover’, speed: 500 });
Еще одна вещь, какую мы можем сделать, это уменьшить время тайм-аута, тоисть время необходимое для каждого перехода.
$(‘#myslides’).cycle({ fx: ‘cover’, speed: 500, timeout: 2000 });
Теперь у нас есть отличное слайд-шоу, которое можно использовать в портфолио или еще где-то. В этом уроке я показал только несколько настроек, которые могут быть изменены в сценарии. Также Вы можете использовать следующие настройки сценария:
shuffle
$(‘#myslides’).cycle({ fx: ‘shuffle’, easing: ‘backout’, delay: -4000 });
zoom
$(‘#myslides’).cycle({ fx: ‘zoom’, sync: false, delay: -2000 });
turndown
$(‘#myslides’).cycle({ fx: ‘turnDown’, delay: -4000 });
curtainX
$(‘#myslides’).cycle({ fx: ‘curtainX’, sync: false, delay: -2000 });
scrollRight
$(‘#right’).cycle({ Fx:’scrollRight’, next:’#right’, timeout: 0, easing:’backinout’ });
Полный программный код
Ваш конечный HTML файл должен выглядеть следующим образом:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""l1/DTD/xhtml1-transitional.dtd"> <html xmlns="l"> <head> <title> JQuery Слайд-шоу </title> <link rel="stylesheet" type="text/css" media="screen" href="screen.css" /> <script type="text/javascript" src="js/jquery-1.4.2.js">/script> <script type="text/javascript" src="js/jquery.cycle.all.js">/script> <script type="text/javascript"> $(document).ready(function(){ $(‘#myslides’).cycle({ fx: ‘cover’, speed: 500, timeout: 2000 }); }); </script> </head> <body> <div id="myslides"> <img src="/images/capitol.jpg" /> <img src="/images/flowers.jpg" /> <img src="/images/countryscene.jpg" /> </div> </body> </html>
Заключение
На простом примере Вы смогли увидеть, как работает плагин jQuery Cycle. Имейте в виде, что этот плагин имеет практически неограниченные возможности.