Скрипты

photo-fusion-система-обмена-изображениями Photo Fusion – система обмена изображениями. Это место, где вы можете делиться фотографиями бесплатно и без проблем, пользователи могут делиться своими...
vanguard-v2-1-0-система-авторизации-и-управление-пользователями Vanguard - это приложение PHP, написанное на основе Laravel PHP, которое позволяет владельцам сайтов быстро добавлять и активировать аутентификацию,...
my-loto-скрипт-моментальной-лотереи-рулетки Скрипт моментальной лотереи, где несколько человек вкладывают деньги в общий банк, через минуту этот банк достается одному человеку (победитель...

Для Photoshop

animation-glitch-photoshop-action Action для программы Photoshop, который генерирует видео ряд анимационных эффектов в виде помех на экране, из ваших изображений. Вы можете создать...
radiant-action-photoshop Экшен для программы Photoshop, создаёт эффект света и геометрических фигур, что поможет создать стильный модный вид вашему образу. Создавайте яркие и...
doomsday-action-экшен-для-photoshop Экшен для программы Photoshop, создаёт потрясающий эффект драматизма с глубокими тенями и световым контрактом. Отлично подойдёт при создании рекламных...

Слайд шоу на jQuery

Слайд шоу на jQuery

Слайд-шоу сейчас очень часто применяется в web дизайне, красивая смена изображений привлекает внимание, поэтому слайд шоу очень хорошо подходит для презентации какой либо важной информации или товара. В этом примере вы увидите, как сделать функциональное легко настраиваемое слайд шоу с использованием библиотеки jQuery и специального к не плагина jQuery Cycle.

Для начала скачайте архив, в котором находятся все необходимые javascript файлы.

Demo

Архив

В начале HTML документа подключаем библиотеку и плагин jQuery.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Cycle plugin - Слайд-шоу</title>
<script type="text/javascript" src="http://yandex.st/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>

Теперь добавляем DIV блок с id s1 в котором находятся ссылки на изображения которые будут использоваться  в слайд-шоу.

<div id="s1">
<img src="/img/beach1.jpg" />
<img src="/img/beach2.jpg" />
<img src="/img/beach3.jpg" />
<img src="/img/beach4.jpg" />
 
</div>

Связываем наш блок div id="s1” с плагином jQuery Cycle, этот участок кода можно вставить в сам html документ или вынести в отдельный js файл как сделано у нас примере.

$(function() { 
 $('#s1').cycle({ 
 fx: 'fadeZoom', // Название эффекта перехода 
 delay: -3000,// Время смены изображения
 timeout: 5000 // Время показа изображения 
 });
});

Как вы видите здесь очень легко изменять настройки такие как эффект перехода между изображениями, время смены картинки и время её показа. 

Список доступных эффектов .

  • blindX
    blindY
    blindZ
    cover
    curtainX
    curtainY
    fade
    fadeZoom
    growX
    growY
    scrollUp
    scrollDown
    scrollLeft
    scrollRight
  • scrollHorz
    scrollVert
    shuffle.
    slideX
    slideY
    toss
    turnUp
    turnDown
    turnLeft
    turnRight
    uncover
    wipe
    zoom

 

 

Опции.

  • fx - имя эффекта
    speed - скорость
    timeout - время показа
    random - показ слайдов случайным образом (активация - random: 1 )
    pause - при наведении мышью смена изображений останавливается (активация - pause: 1 )
    easing - имя easing-эффекта (работает только при подключенном плагине jQuery Easing Plugin v1.1.1, с последней версией 1.3 у меня работать отказался). См. второй пример второй демки.
    delay - задержка. Добавляется к таймауту первого слайда. Опция может быть полезна при наличии нескольких слайдов на странице, т.е. можно сделать чтобы слайды у разных наборов менялись неодновременно, сохраняя при этом одинаковое время показа.
    sync - контролирует, происходят ли смены слайдов синхронно? По умолчанию опция включена (отключаем - sync: 0).

jQuery Cycle
  • Просмотров: 5491
  1. Комментарии (0)

  2. Add Yours

Комментарии (0)

Комментарии отсутствуют

Оставьте свой комментарий

Оставить комментарий в качестве гостя. Зарегистрироваться либо авторизоваться.
Вложения (0 / 3)
Поделиться вашим местоположением

Векторная графика

плашки-для-рекламных-текстов Набор ярких плашек для рекламных текстов в векторном формате, которые значительно выделят ваш текст на общем фоне. Формат файлов: AI / EPS /...
start-up-rockets-–-ракеты-в-векторе Набор векторных изображений, разного вида летящих ракет. Можно использовать при создании анимации и рекламных баннеров. Формат файлов:...
pop-art-man-векторные-мужчин-в-стиле-поп-арт Набор изображений в векторном формате, яркие иллюстрации мужчин в модном стиле поп арт, отлично подойдёт при создании рекламных баннеров. Формат...

Растовая графика

атлетика-и-бодибилдинг-–-фото-клипарт Набор из 32 изображений высокого качества на тему атлетики и бодибилдинга. Отлично подойдут для рекламных флаеров, баннеров и слайдеров на сайтах...
интернет-технологии,компьютер,гаджеты-–-фото-клипарт Набор из 25 изображений высокого качества, различные интернет технологии, компьютеры, гаджеты. Отлично подойдет для слайд-шоу. Размер 4800 на 3200 px....
бизнес-леди-–-набор-фото-клипарта Набор из 15 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...

VLVIT.RU - Сайт для людей увлекающиеся web дизайном, современными интернет технологиями, графическими программами Adobe Photoshop, Illustrator.

2017г.