jQuery слайд-шоу
Библиотека jQuery – это очень хорошее решение многих проблем. jQuery можно использовать для расширения возможностей сайта и в тоже время упростить процесс. jQuery плагин цикла позволяет очень легко и быстро создать слайд-шоу любой сложности. В этом уроке мы, как раз и будем создавать слайд-шоу. После изучения урока Вы увидите, что процесс создания проходит очень интересно и самое главное быстро.
Перед началом прохождения урока, Вам необходимо скачать библиотеку jQuery и плагин jQuery Cycle.
Шаг №1. Создаем HTML каркас
Так как в примере я не вижу смысла создавать сложный дизайн, мы будем использовать очень легкие HTML и CSS макеты. HTML код будет, например, таким:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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. Имейте в виде, что этот плагин имеет практически неограниченные возможности.
Последние уроки категории:
Установка jQuery плагина - jDigiClock - Digital Clock
jDigiClock — интересный плагин, выполненный на jQuery. Вдохновением для данного плагина стал виджет Hero Clock на HTC. Плагин может показывать цифровое время и погоду, достаточно удобно настраивается и его легко устанавливать.
Русско-английский переводчик используя Google Ajax API
Google предоставляет разработчикам массу возможностей для работы со своими сервисами. Как вы наверное поняли из названия поста, я буду использовать Google AJAX API. Что же это такое и для чего это нужно можно прочитать здесь и здесь. Для работы нам понадобятся: php и jQuery.
Создаем Ajax конвертер валют
Помимо основных функций поисковой системы Google предоставляет ещё и множество других услуг. Одна из них это калькулятор с расширенными возможностями. Как это можно использовать узнаете в этой статье.
Красивое акордеон меню на jQuery
Комментарии: