508.com.ua » script type508.com.ua https://508.com.ua 508.com.ua Tue, 01 Jul 2025 17:00:27 +0000 ru-RU hourly 1 https://wordpress.org/?v=3.9.25 jQuery слайд-шоу https://508.com.ua/jquery-slajd-shou/ https://508.com.ua/jquery-slajd-shou/#comments Wed, 05 Jun 2013 19:31:26 +0000 http://wordpress.work/jquery-slajd-shou/ Библиотека 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 равную высоте и ширине изображений.

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

jQuery слайд-шоу

Шаг №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 файл слайд-шоу, то уже увидите слайд шоу. Но на этом еще не все. До сих пор мы создали стандартный переход, далее мы будем его улучшать.

jQuery слайд-шоу

Настройка слайд-шоу

Сейчас мы посмотри, как изменить переход в слайд шоу. Я собираюсь показать, как можно изменить скорость перехода и изменить сам переход.

Настройка плагина очень проста. Если Вы хотите изменить переход, то необходимо чуть-чуть изменить код скрипта.

$(‘#myslides’).cycle({ fx: ‘cover’ });

Теперь мы зададим время перехода.

$(‘#myslides").cycle({ fx: ‘cover’, speed: 500 });

jQuery слайд-шоу

Еще одна вещь, какую мы можем сделать, это уменьшить время тайм-аута, тоисть время необходимое для каждого перехода.

$(‘#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. Имейте в виде, что этот плагин имеет практически неограниченные возможности.

]]> https://508.com.ua/jquery-slajd-shou/feed/ 0