Бесплатные скрипты слайд-шоу, галерей и лайтбоксов. Эффектное слайд-шоу на JavaScript Создать слайд шоу используя javascript шаблоны

Большое эффектное слайд-шоу с использованием jQuery технологий.

Масштабируемое слайд-шоу с использованием jQuery. Вы сможете задать размеры для слайд-шоу, которые вам больше всего подходят.

Слайдер изображений с текстовым описанием.

При наведении курсора на стрелки навигации появляется круглая миниатюра следующего слайда.

jQuery слайдер с индикатором загрузки изображений. Предусмотрена автоматическая смена слайдов.

Слайдер с объемным фоновым эффектом. Изюминка этого слайдера в движение фона, который состоит из нескольких слоев, каждый из которых прокручивается с различной скоростью. В итоге получается имитация объемного эффекта. Выглядит очень красиво, вы можете сами в этом убедиться. Более плавно эффект отображается в таких браузерах как: Opera, Google Chrome, IE.

На демонстрационной странице в разделе «examples» вы сможете найти ссылки на все возможные варианты использования этого плагина.

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

Простой в использовании JQuery плагин для создания слайд-шоу.

Легкий jQuery плагин в различном исполнении. Предусмотрена автоматическая смена слайдов.

Если посетитель в течении определенного времени не нажмет на стрелки «Вперед» или «Назад», то галерея начнет прокручиваться автоматически.

Очень профессиональный качественный легкий плагин с валидным кодом. Предусмотрено много различных эффектов смены слайдов.

Свежий слайдер. jQuery слайдер с различными эффектами смены изображений.

Легкий слайдер с автоматической сменой слайдов.

Слайдер с автоматической сменой изображений.

Плагин для реализации слайд-шоу с автоматической сменой слайдов. Есть возможность управлять показом с помощью миниатюр изображений.

jQuery CSS слайдер изображений с использованием плагина NivoSlider .

Плагин для ротации содержимого. Три варианта использования: без навигации (с автоматической сменой в формате слайд-шоу), с навигацией в виде кнопок, с навигацией в виде миниатюр изображений.

Свежий jQuery плагин для оформления портфолио фотографа. В галерее реализован интересный эффект смены изображений. Фотографии сменяют друг друга с эффектом похожим на работу затвора объектива.

Реализация слайдера изображений с использованием javascript и CSS.

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

Легкий слайдер «Slider Kit». Слайдер представлен в различном исполнении: вертикальный и горизонтальный. Также реализованы различные виды навигации между изображениями: с помощью кнопок «Вперед» и «Назад», с помощью колеса мыши, с помощью клика мыши по слайду.

Галерея «Slider Kit». Прокрутка миниатюр осуществляется как в вертикальном так и горизонтальном направлении. Переход между изображениями осуществляется с помощью: колеса мыши, щелчка мыши или наведения курсора на миниатюру.

Вертикальный и горизонтальный слайдер контента на jQuery.

Слайд-шоу с автоматической сменой слайдов.

Аккуратный слайдер на jQuery и CSS3, созданный в 2011 году.

jQuery слайд-шоу с миниатюрами.

Слайд-шоу с кнопками навигации.

jQuery плагин «Skitter» для создания потрясающего слайд-шоу. Плагин поддерживает 22 (!) вида различных анимационных эффектов при смене изображений. Может работать с двумя вариантами навигации по слайдам: с помощью номеров слайдов и с помощью миниатюр. Обязательно посмотрите демонстрацию, очень качественная находка. Используемые технологии: CSS, HTML, jQuery, PHP.

Функциональное слайд-шоу. В виде слайдов могут выступать: простые изображения, изображения с подписями, изображения с всплывающими подсказками, видео-ролики. Для навигации можно использовать стрелки, ссылки на номера слайдов и клавиши вправо/влево на клавиатуре. Слайд-шоу выполнено в нескольких вариантах: с миниатюрами и без них. Для просмотра всех вариантов пройдитесь по ссылкам Demo #1 - Demo #6 расположенным сверху на демонстрационной странице.

Очень оригинальное оформление слайдера изображений, напоминающее веер. Анимированная смена слайдов. Навигация между изображениями осуществляется с помощью стрелок. Предусмотрена также автоматическая смена, которую можно включать и выключать с помощью кнопки Play/Pause, расположенной сверху.

Анимированный jQuery слайдер. Фоновые изображения автоматически масштабируются при изменении размеров окна браузера. Для каждого изображения выплывает блок с описанием.

Новый jQuery слайдер. Несколько классных анимированных эффектов при смене слайдов.

Анимированная jQuery галерея.

Легкое слайд-шоу на jQuery c автоматической сменой слайдов.

Профессиональный слайдер контента. Возможны варианты с автоматической сменой слайдо, а также вариант с использованием колеса мыши для перехода между слайдами.

Легкий сладер изображений на jQuery. Очень много вариантов реализации: горизонтальная и вертикальная смена изображений, со ссылками на номер слайда и без них, с подписями изображений и без, различные эффекты смены изображений. Есть функция автоматической смены слайдов. Ссылки на все примеры реализации можно найти на демонстрационной странице .

Слайд-шоу с миниатюрами поддерживает режим автоматической смены слайдов.

Слайдер с множеством эффектов смены изображений.

Стильный слайдер изображений на jQuery.

Скрипт, с помощью которого легко создать презентации нескольких изображений. Скрипт поддерживает большой набор эффектов и элементов цикла.

Presentation Cycle - вариация функционала Cycle. Вместо списка номеров слайдов, Presentation Cycle автоматически генерирует индикатор прогресса, который показывает время появления нового слайда.

• Циклический показ изображений.
• Настраиваемое время анимации.
• Генерация индикатора навигации, который отображает время показа слайда.
• Работает в современных браузерах.

Подключаем к странице все необходимые библиотеки и скрипты:

Создаем контейнер, который содержит элементы для Cycle:

Заголовок

Контейнер с элементами цикла имеет id “presentation_container ”, что соответствует использованию установок по умолчанию в скрипте и таблице стилей. Вложенные элементы имеют класс “pc_item ”, что также соответствует использованию установок по умолчанию.

После контейнера вставляем вызов скрипта:

presentationCycle.init();

Для запуска скрипта с установками по умолчанию описанных действий достаточно.

Сначала разберемся, как настраивать изображения, которые используются для генерации индикатора прогресса.

Код Javascript в файле presentationCycle.js содержит следующую секцию, касающуюся изображений, используемых скриптом (строка 19 ):

// Опции индикатора прогресса barHeight: 14, // Высота полоски индикатора barDisplacement: 20, // Смещение индикатора barImgLeft: "images/pc_item_left.gif", // Изображение для левой части barImgRight: "images/pc_item_right.gif", // Изображение для правой части barImgCenter: "images/pc_item_center.gif", // Изображение для центральной части barImgBarEmpty: "images/pc_bar_empty.gif", // Изображение для пустой полоски barImgBarFull: "images/pc_bar_full.gif", // Изображение для заполненной полоски

Высота полоски определяется в пикселях. Она должна быть такой же как и высота изображений, которые хранятся в папке images . Изображения являются спрайтами, которые включают в себя версии для активного и пассивного состояния.

Для выравнивания изображений нужно сделать два одинаковых квадрата расположенных рядом. Левая часть используется для пассивного состояния, а правая - для активного состояния.

Нужно, чтобы все изображения имели одинаковую высоту, которая соответствует высоте полоски индикатора.

Cмещение индикатора barDisplacement комбинируется из отступа + поле полоски.

Для использования пользовательских настроек можно задействовать следующий код вызова плагина, который снимает необходимость вносить правки в текст JavaScript файла:

PresentationCycle.barHeight = 10; // Отличные от установок по умолчанию значения presentationCycle.barImgLeft = "images/pc_item_left_custom.gif"; presentationCycle.init(); // Запускаем скрипт

Для настроек параметров цикла, используются следующие установки:

// Опции слайдов slideTimeout: 8000, containerId: "presentation_container", //Опции цикла cycleFx: "scrollHorz", cycleSpeed: 600,

slideTimeout - время демонстрации слайда.
containerId - контейнер с элементами цикла.
cycleFx - эффект перехода между слайдами, используются плагина Cycle . cycleSpeed - скорость анимации перехода между слайдами.

Для одного из проектов понадобился небольшой скрипт слайд-шоу, который в бесконечном цикле показывает картинки с эффектом растворения. Вот что у меня получилось. Сперва надо подготовить элемент HTML-страницы, где будет происходить все это действо. Тут ничего сложного, единственно, что надо сразу же задать размеры области:Теперь подумаем, как сделать плавное перетекание одного изображения в другое. Есть разные варианты, я остановился на следующем. Берутся два изображения и накладываются одно на другое. Затем у верхнего изображения по таймеру изменяется значение прозрачности, постепенно уменьшаясь до полностью прозрачного. В результате мы видим нижнее изображение сквозь "растаявшее" верхнее. На следующем этапе надо поменять изображения, нижнее переходит вместо верхнего, а на место нижнего изображения загружается следующее по списку. Для пользователя этот этап останется незаметным, так как он уже видит фоновую картинку и браузеру не надо ее ниоткуда загружать, а новая картинка располагается под видимой и процесс ее загрузки во время паузы между сменой кадров остается незаметным. А после первого прохода слайд-шоу все изображения вообще будут браться из кэша браузера. В виде HTML исходное положение слайд-шоу будет выглядеть примерно так:

Осталось воплотить теорию на практике. Слайд-шоу у нас выполняется в два повторяющихся этапа: пауза между переходами, когда картинка отображается без изменений, и цикл с применением эффекта растворения. Причем каждое это действие в конце запускает следующее. Для каждого этапа напишем свою функцию на JavaScript.

Код достаточно простой, но все-таки некоторые моменты требуют пояснений. Здесь подразумевается, что все картинки слайд-шоу имеют одинаковый размер, соответствующий размеру области слайд-шоу, находятся в папке "img" и упорядочены по именам, начиная с "1.jpg" до "10.jpg". В вашем проекте пути и имена файлов могут быть другими. Интервал задержки между сменой кадров задан жестко - 5000 миллисекунд или 5 секунд. Скорость одной итерации затухания - 50 миллисекунд. Эти значения можно уменьшить или увеличить по необходимости. Осталось только запустить слайд-шоу.

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

И это не случайно!

Если Вы были на странице «Анимация» , то видели там работу GIF -анимации.
Здорово, конечно! И создаётся довольно просто — в фотошоп. Только у неё есть существенный недостаток, который очень ограничивает её применение на сайтах. Малоцветность .

Такого недостатка полностью лишено слайд-шоу !

Именно поэтому, для размещения на сайте различных многоцветных рисунков, фотографий, лучше всего воспользоваться не анимацией, а слайд-шоу.

Только в этом случае, применения столь любезных моему сердцу простых HTML+CSS, уже будет недостаточно. Нужно подключать скрипты … … !

Самое оптимальное решение — использовать jQuery .
На страницах БОЛЬШОГО СДВОЕННОГО раздела, посвящённого этой замечательной технологии: «jQuery» , есть много примеров её использования. Не буду повторяться.

Здесь применил jQuery для создания слайд-шоу на своём сайте, или, так называемого, слайдера . Его работу Вы видите сейчас ниже, а под ним подробно написал, что делал для создания такого вида слайдера, и показал ещё 7(!) действующих слайдеров.

Как видите, этот слайдер работает исправно! Впрочем, и все остальные тоже. Можете сами убедиться. => смотреть сразу

**Примечание. В отличие от других страниц раздела jQuery , нужные скрипты прописал непосредственно в HTML-код самой этой страницы.
Кроме того, что очень важно(!), они работают у меня от другой версии jQuery, более поздней, чем использую здесь.

Если там использую версию jquery v.1.10.1.min , то здесь v.1.8.3.min

Однако, подробнее об этом и обо всём остальном, по-порядку — дальше.

Работа по созданию и установке слайд-шоу на сайте обычно состоит из 4-ёх основных этапов.

1. Подобрал фотографии. Главное — чтобы они были обязательно одного размера . Нужно их тщательно измерить.
В данном случае, взял готовые картинки из дополнительных материалов, приложенных к обучающему курсу. Какому? Об этом здесь: «Ссылки» (откроется в новом окне).

2. Нарисовал в фотошоп графическое изображение слайдера в стиле «телевизор» . Пусть не оригинально, зато очень удобно.
Главное — размер просмотровой зоны нужен немного больше по ширине и высоте, чем у подготовленных рисунков.

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

Разместил сами изображения внутри тэга p , для которого установил в стилях CSS ширину и высоту, и указал его class=»slideshow» . А сам абзац с ними поместил внутрь общего тэга div , на фон которого повесил подготовленное графическое изображение слайдера (телевизор* ). Ему дал class=»slider_fon» .
Причём, только для него , чтоб разгрузить страницу, подключил внешнюю таблицу стилей, а для рисунков всё делал внутри HTML-кода .

P.S.** Последнее действие вовсе НЕ обязательно. Просто, мне так удобнее. Структура страницы логичнее как-то выглядит.

В правилах CSS указал размер окна для изображений, которые потом будут появляться в слайдере (width — height ) . Естественно, у всех изображений должен быть одинаковый размер .
При желании, мог расширить CSS-параметры, добавив, скажем, рамки, фон, отступы и прочие элементы. Однако, думаю, это уже было бы лишним.

Если же, всё-таки, Вам захочется так сделать, то, размеры указывайте ОБЩИЕ, то есть: изображение + ВСЕ установленные отступы и границы.

Рекомендую посетить справочную страницу, которую делал для себя во время изучения технологии jQuery. Очень поможет Вам разобраться.
Открыл к ней общий доступ: «ВЫБОРКА в jQuery» (откроется в новом окне).

Как всегда, сначала создал папку js на сайте. Затем скачал нужные скрипты для слайд-шоу (архив ), и распаковал его в эту папку. В ней получилось два файла скриптов: ядро jquery-1.8.3.min.js и плагин jquery.cycle.all.min.js .

В неё же, на всякий случай, добавил и свой управляющий файл myscripts11.js . Однако, здесь он мне не пригодился для запуска и демонстрации слайд-шоу. Разве что, проверил им правильное подключение созданной папки.
Но … …, пусть будет. Мало ли, что в дальнейшем захочу сделать с размещёнными здесь слайдерами. Короче, «… наш бронепоезд всегда на запасном пути» .

Дальше. Внутрь тэга … вставил строчки, где прописал пути к скриптам..jpg» type=»text/javascript»>, и к плагину: .
Свой («запасной») управляющий файл закомментировал .

— и последнее —

Зашедшие на мой сайт с отключённым в браузере интерпретатором JavaScript , наблюдать слайд-шоу , разумеется, не смогут.
Они увидят рисунки так, как те прописаны в HTML-коде , т.е. в столбик, друг за другом.
Для них сделал строчку-предупреждение и вставил её в тэг … .

Ну вот! Слайд-шоу создано. Осталось настроить его параметры: скорость смены рисунков, способы их показа, и т.д..

Как уже писал выше, (в примечании** ), нужные скрипты прописал непосредственно в HTML-код самой этой страницы.
В созданном у себя на сайте слайд-шоу, применил настройки «по умолчанию» .

Вообще же, легко установить различные, интересные типы переходов между картинками, изменяя javascript , размещённый в теле страницы.
Скажем, изменив в скрипте строчку sync: false на sync: true , можно убрать пробел при смене изображений.

Важное замечание!
Разные версии jQuery могут конфликтовать друг с другом, если они на одной странице.
Обязательно(!) проверяйте работу плагинов с установленной версией jQuery , поскольку не все версии сочетаются!

Пример**
На других страницах раздела jQuery , использующих библиотеку, установлена версия jquery v.1.10.1.min . Так вот, она более современная, чем v.1.8.3.min , от которой исправно(!) работают слайдеры слайд-шоу здесь.

Плагин jquery.cycle.all.min.js с ней НЕ РАБОТАЕТ!!!
(проверено )

Впрочем, не огорчайтесь. Всё в Ваших руках!
В разделе моего сайта «Полезное» (откроется в новом окне) найдёте испытанный(!) полный комплект нужных скриптов для создания такого слайд-шоу на своём сайте. (Разумеется, БЕСПЛАТНО!)

Не буду в этом подразделе столь подробно описывать все действия по созданию слайд-шоу. В принципе, они абсолютно одинаковые.
Даже проще. Не нужно рисовать фоновую картинку слайдера в фотошоп. Даже отдельная таблица стилей CSS не понадобится.

Если хотите разместить различные варианты слайд-шоу на одной странице сайта, как я это сделал здесь (увидите ниже ), указывайте разные классы для каждого варианта в строчке скрипта $(‘.slideshow ‘).cycle({

P.S.* Не забудьте прописать в CSSразмеры окна для каждого класса , если, всё же, будете использовать таблицу стилей. Мне она не понадобилась.

Посмотрите сначала на неподвижные рисунки, которые, аналогично, взял из обучающего курса (Какого? Повторю ссылку: «Ссылки» ), и разместил их здесь для сравнения.

Вот они. Будущие участники 7-ми слайд-шоу!
Смотрите их «выступление» ниже.

Покажу несколько популярных видов слайдеров. Вставил их, для удобства просмотра, в общую таблицу.
Слева — название эффекта и краткое пояснение, если нужно. Справа — пример.

Надеюсь, показанное «групповое» слайд-шоу Вам понравилось.
Действительно, удобно! «Танцуют» домики — каждый в своей ячейке, и никому не мешают. Не зря я им +5 за «выступление» поставил!

А серьёзно — такой способ создания слайд-шоу для сайта экономит огромное количество места на странице.
Поэтому, повторю сказанное в начале раздела.
Самое оптимальное решение для создания разных шоу на сайте — использовать jQuery .

Посмотреть практическое применение слайдеров для дизайна страниц ресурса, можете на специально созданном мною сайте-визитке «Личная страничка» .

Можно ли сделать что-либо подобное БЕЗ подключения скриптов?
Конечно можно! Об этом читайте дальше.

Как создать простой слайдер на сайте, чтобы НЕ применять разные сложные и тяжёлые (по «весу») скрипты? Легко!
Не я был бы, если б не показал Вам такие интересные и простые способы!

Воспользуемся для этого базовыми технологиями интернета => HTML + CSS .

Базовые — означает такие, без которых интернет невозможен вообще, в принципе!

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

После уже сами сможете решить, что больше подходит Вашему ресурсу.

Надеюсь, размещённая информация о том, как можно просто создать слайд-шоу для сайта, была Вам интересна.
Заодно, и для своего «Портфолио» разместил вполне достаточно материала по этой увлекательной теме.

Посетителям, кому нужно создать слайд-шоу, либо галерею на сайте, подключить аудио и видео к нёму, но нет времени самостоятельно заниматься этим, способен помочь раздел «Выбор исполнителя» (откроется в новом окне).

Сделал прямой заход на эту страницу из трёх БОЛЬШИХ разделов. Вернуться также можно прямо. Наведите курсор мыши на стрелки — появятся подсказки, куда они ведут.
Кликнув по верхнему логотипу , попадёте на «Главную».

Простой, легкий (21Кб в сжатом виде) слайдер, написанный на чистом Javascript, не имеющий никаких зависимостей, т.е.

работает без jQuery.

Протестирован в следующих браузерах:

• Chrome 26.0
• Firefox 20.0
• Safari 5.1.7
• IE 10
• Opera 16.0

Есть неполная поддержа IE8/9 (нет эффектов).

GitHub | Демо

• Вы можете добавить на страницу неограниченное количество слайдеров, даже разместить один в другом.
• Изменяет размеры с зависимости от содержимого, но можно и запретить.
• Навигация с помощью клавиатуры — когда курсор находится на слайдере, можно переключать слайдеры с стрелками.
• Поддержка мобильных touch событий.

Перед закрывающимся тегом необходимо подключить slidr.js или slidr.min.js файл.

slidr.js может работать с любыми, элементами, имеющими аттрибут. Допускается использовать любые дочерние элементы первого уровня с атрибутом, например:

После подключения slidr.js станет доступен глобальный объект. Самый простой способ создания:

Вызов с заданием всех настроек:

Все доступные настройки для slidr.js приведены в таблице ниже.

Функции обратного вызова и получают следующие данные:

Глобальное пространство имен slidr предоставляет следующие функции:

Короткая запись

Полный список функци API Slidr.js представлен ниже

В некоторых браузерах появляется этот неприятный баг. Чтобы исправить его нужно добавить стиль к:

Slidr сам "понимает", нужно ли изменять размеры слайдера под изображение. Если у блока слайдера указаны размеры, то Slidr не будет автоматически их менять. Если указаны свойства min-width и min-height, то слайдер будет менять свой размер под контент, учитывая эти значения. В противном случае определение размеров будет проходить в автоматическом режиме.

Автоматическое изменение размеров

Статические размеры

Разметка элементов управления следующая:

Вы можете кастомизировать любой элемент управления слайдером с помощью CSS селекторов:

Элемент управления "стрелка" реализован с помощью псевдоселектора, поэтому, чтобы его скрыть, используйте следующий код:

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

Стилизация хлебных крошек с помощью CSS:

Это программное обеспечение может свободно использовать под лицензией MIT.

Теги: Javascript

Слайдер на чистом javascript

Стенограмма видео

Вправо
Влево

#slider {position: relative; overflow: hidden; width: 600px; height: 320px; margin: 20px auto; padding: 0; list-style: none;}
.slide {position: absolute; width: 100%; height: 100%; transition: all 1s ease-in 0.1s; left:0;}
.slide img {width: 100%;}
.arrows {position: relative; margin: 0 auto; width: 600px;}
.arrow {position: absolute; cursor: pointer;}
.no_active {color: red;}
.next {right: 0;}

Скрипт js:

var next = document.getElementById(‘next’);
var prew = document.getElementById(‘prew’);

var slides = document.getElementsByClassName(‘slide’);
for(var i=0; i

Возврат к списку

Территориально я нахожусь в Санкт-Петербурге, но могу и готова работать со всеми, вне зависимости от вашего местоположения.

Вы можете написать мне через форму обратной связи, либо связаться через социальные сети. Ознакомиться с портфолио можно здесь и здесь.

Приветствую вас дорогие друзья!

В этом небольшом уроке я покажу, как можно наиболее простым способом создать слайд-шоу!

Слайд-шоу – это галерея на javascript, в которой изображения меняются автоматически через определенный промежуток времени.

В нашей галерее, при смене изображения, мы будет использовать небольшой эффект, а именно – изменение прозрачности картинки!

Простой Html код:

Здесь все очень просто – в блок с классом slideshow помещаем изображение, которое будет первым.

А вот, собственно, и стили вышеупомянутого класса:

Задаем ширину и выравниваем блок по центру.

Теперь подробнее рассмотрим и разберем javascript (Jquery) код:

Сначала описывается массив image_array, содержащий ссылки на изображения.

Если вам нужно добавить, удалить или изменить картинки галереи, то просто замените ссылки в этом массиве – больше ничего изменяться не нужно!

Переменная image_num используется в качестве счетчика картинок. Когда мы доходим до последней картинки массива, мы обнуляем эту переменную, чтобы снова начать показ с первой картинки (делаем зацикливание).

Как я уже говорил, переменная image_num – это счетчик, его мы сравниваем с длиной массива (то есть с количеством картинок участвующих в слайд шоу) и если image_num равен максимальному значению, то обнуляем его.

Функция slide запускается каждые 3 секунды (3000 миллисекунд) с помощью интервала (setInterval), это значит, что картинки будут перелистываться каждые 3 секунды.

Как видите, ничего сложного нет!

На этом данный урок по javascript подошел к завершению, теперь можете взглянуть на demo пример, а также сказать исходный файл урока.

На этом все, до новых уроков, пока!

Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.

Если в слайдах содержатся только картинки, можно слегка поменять структуру:

Предыдущий Следующий

Не забудьте добавить осмысленное значение атрибуту alt.

Для использования ссылок на страницы можно сделать следующее:

... ... ... 1 2 3

Предыдущий Следующий 1 2 3

Отметим использование атрибутов «data» – некоторые слайд-шоу умеют вставлять картинки как фон, и эти атрибуты будут использованы в скрипте как места для связи фона и слайда.

Если порядок слайдов хорошо определён (к примеру, в презентации), можно использовать нумерованные списки

Предыдущий Следующий

Т.к. слайд-шоу будет идти справа налево, то у внешнего контейнера будет фиксированный размер, а внутренний будет шире, поскольку он содержит все слайды. Виден будет первый слайд. Это задаётся через overflow:

Slider { width: 1024px; overflow: hidden; } .slider-wrapper { width: 9999px; height: 683px; position: relative; transition: left 500ms linear; }

Стили внутреннего враппера включают:

Большая ширина
- фиксированная высота, максимальная высота слайда
- position: relative, что позволит создать перемещение слайдов
- CSS transition left, что позволит сделать движение плавным. Для простоты мы не указали все префиксы. Для этого также можно использовать CSS transformations (вместе с translation).

У слайдов есть атрибут float, чтобы они выстраивались по одной линии. Позиционируются они относительно, чтобы можно было получить их смещение слева в JS. Его мы используем для создания эффекта скольжения.

Slide { float: left; position: relative; width: 1024px; height: 683px; }

Хоть мы и задали определённую ширину, в скрипте мы сможем поменять её, умножив количество слайдов на ширину слайда. Никогда не знаешь, какая ширина может потребоваться.

Навигация осуществляется через кнопки “Предыдущий” и “Следующий”. Обнуляем их стили по умолчанию и назначаем свои:

Slider-nav { height: 40px; width: 100%; margin-top: 1.5em; } .slider-nav button { border: none; display: block; width: 40px; height: 40px; cursor: pointer; text-indent: -9999em; background-color: transparent; background-repeat: no-repeat; } .slider-nav button.slider-previous { float: left; background-image: url(previous.png); } .slider-nav button.slider-next { float: right; background-image: url(next.png); }

При использовании ссылок на страницы вместо кнопок можно сделать следующие стили:

Slider-nav { text-align: center; margin-top: 1.5em; } .slider-nav a { display: inline-block; text-decoration: none; border: 1px solid #ddd; color: #444; width: 2em; height: 2em; line-height: 2; text-align: center; } .slider-nav a.current { border-color: #000; color: #000; font-weight: bold; }

Эти классы будут назначены из скрипта динамически.

Такой подход годится для эффекта скольжения. Если мы хотим достичь эффекта исчезновения и появления, надо поменять стили, поскольку float добавляет горизонтальные отступы между слайдами. То есть, слайды на одной линии нам не нужны – нам нужна "пачка" слайдов:

Slider { width: 1024px; margin: 2em auto; } .slider-wrapper { width: 100%; height: 683px; position: relative; /* Создаёт контекст для абсолютного позиционирования */ } .slide { position: absolute; /* Абсолютное позиционирование всех слайдов */ width: 100%; height: 100%; opacity: 0; /* Все слайды скрыты */ transition: opacity 500ms linear; } /* Изначально виден только первый */ .slider-wrapper >
Для скрытия слайдов мы используем свойство opacity, поскольку программы для чтения данных с экрана пропускают содержимое элементов, у которых установлен display: none (см. CSS in Action: Invisible Content Just for Screen Reader Users).

Благодаря контекстному позиционированию CSS мы создали "пачку" слайдов, где последний слайд в исходнике оказывается впереди других. Но нам не это нужно. Для сохранения порядка слайдов нам надо спрятать все слайды, кроме первого.

JS задействует CSS transition, меняя значение свойства opacity у текущего слайда, и обнуляя это значение у всех остальных.

Поэтому, когда мы первый раз нажимаем Следующий, указатель увеличивается на 1 и мы получаем второй слайд. Нажимая на Предыдущий, мы уменьшаем указатель и получаем первый слайд. И т.д.

Вместе с указателем мы используем метод jQuery .eq() для получения текущего слайда. На чистом JS это выглядит так:

Function Slideshow(element) { this.el = document.querySelector(element); this.init(); } Slideshow.prototype = { init: function() { this.slides = this.el.querySelectorAll(".slide"); //... }, _slideTo: function(pointer) { var currentSlide = this.slides; //... } };

Помните - NodeList использует индексы так же, как массив. Ещё один способ выбрать текущий слайд – селекторы CSS3:

Slideshow.prototype = { init: function() { //... }, _slideTo: function(pointer) { var n = pointer + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + n + ")"); //... } };

Селектор CSS3:nth-child() считает элементы с 1, поэтому нужно добавить единичку к указателю. После выбора слайда его родительский контейнер надо сдвинуть справа налево. В jQuery можно использовать метод.animate():

(function($) { $.fn.slideshow = function(options) { options = $.extend({ wrapper: ".slider-wrapper", slides: ".slide", //... speed: 500, easing: "linear" }, options); var slideTo = function(slide, element) { var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element). animate({ left: - $currentSlide.position().left }, options.speed, options.easing); }; //... }; })(jQuery);

В обычном JS нет метода.animate(), поэтому мы используем переходы CSS:

Slider-wrapper { position: relative; // обязательно transition: left 500ms linear; }

Теперь можно менять свойство left динамически через объект style:

Function Slideshow(element) { this.el = document.querySelector(element); this.init(); } Slideshow.prototype = { init: function() { this.wrapper = this.el.querySelector(".slider-wrapper"); this.slides = this.el.querySelectorAll(".slide"); //... }, _slideTo: function(pointer) { var currentSlide = this.slides; this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; } };

Теперь надо сделать событие клика для каждого элемента управления. В jQuery можно взять метод.on(), а в чистом JS - метод addEventListener().

Также надо проверять, не достиг ли указатель границ списка – 0 для “Предыдущий” и общего количества слайдов для “Следующий”. В каждом случае надо прятать соответствующую кнопку:

(function($) { $.fn.slideshow = function(options) { options = $.extend({ wrapper: ".slider-wrapper", slides: ".slide", previous: ".slider-previous", next: ".slider-next", //... speed: 500, easing: "linear" }, options); var slideTo = function(slide, element) { var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element). animate({ left: - $currentSlide.position().left }, options.speed, options.easing); }; return this.each(function() { var $element = $(this), $previous = $(options.previous, $element), $next = $(options.next, $element), index = 0, total = $(options.slides).length; $next.on("click", function() { index++; $previous.show(); if(index == total - 1) { index = total - 1; $next.hide(); } slideTo(index, $element); }); $previous.on("click", function() { index--; $next.show(); if(index == 0) { index = 0; $previous.hide(); } slideTo(index, $element); }); }); }; })(jQuery);

А на чистом JS это выглядит так:

Function Slideshow(element) { this.el = document.querySelector(element); this.init(); } Slideshow.prototype = { init: function() { this.wrapper = this.el.querySelector(".slider-wrapper"); this.slides = this.el.querySelectorAll(".slide"); this.previous = this.el.querySelector(".slider-previous"); this.next = this.el.querySelector(".slider-next"); this.index = 0; this.total = this.slides.length; this.actions(); }, _slideTo: function(pointer) { var currentSlide = this.slides; this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; }, actions: function() { var self = this; self.next.addEventListener("click", function() { self.index++; self.previous.style.display = "block"; if(self.index == self.total - 1) { self.index = self.total - 1; self.next.style.display = "none"; } self._slideTo(self.index); }, false); self.previous.addEventListener("click", function() { self.index--; self.next.style.display = "block"; if(self.index == 0) { self.index = 0; self.previous.style.display = "none"; } self._slideTo(self.index); }, false); } };

(function($) { $.fn.slideshow = function(options) { options = $.extend({ wrapper: ".slider-wrapper", slides: ".slide", nav: ".slider-nav", speed: 500, easing: "linear" }, options); var slideTo = function(slide, element) { var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element). animate({ left: - $currentSlide.position().left }, options.speed, options.easing); }; return this.each(function() { var $element = $(this), $navigationLinks = $("a", options.nav); $navigationLinks.on("click", function(e) { e.preventDefault(); var $a = $(this), $slide = $($a.attr("href")); slideTo($slide, $element); $a.addClass("current").siblings(). removeClass("current"); }); }); }; })(jQuery);

В этом случае каждый анкор соответствует ID определённого слайда. В чистом JS можно использовать как его, так и атрибут data, хранящий числовой индекс слайдов внутри NodeList:

Function Slider(element) { this.el = document.querySelector(element); this.init(); } Slider.prototype = { init: function() { this.links = this.el.querySelectorAll("#slider-nav a"); this.wrapper = this.el.querySelector("#slider-wrapper"); this.navigate(); }, navigate: function() { for (var i = 0; i < this.links.length; ++i) { var link = this.links[i]; this.slide(link); } }, slide: function(element) { var self = this; element.addEventListener("click", function(e) { e.preventDefault(); var a = this; self.setCurrentLink(a); var index = parseInt(a.getAttribute("data-slide"), 10) + 1; var currentSlide = self.el.querySelector(".slide:nth-child(" + index + ")"); self.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; }, false); }, setCurrentLink: function(link) { var parent = link.parentNode; var a = parent.querySelectorAll("a"); link.className = "current"; for (var j = 0; j < a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } } };

Начиная с IE10 можно управлять классами через classList:

Link.classList.add("current");

А с IE11 атрибуты data можно получать через свойство dataset:

Var index = parseInt(a.dataset.slide, 10) + 1;

Синхронизировать это можно через номерной индекс каждой ссылки в DOM. Один линк – один слайд, поэтому их индексы будут 0, 1, 2 и т.д.

На jQuery код будет такой:

(function($) { $.fn.slideshow = function(options) { options = $.extend({ //... pagination: ".slider-pagination", //... }, options); $.fn.slideshow.index = 0; return this.each(function() { var $element = $(this), //... $pagination = $(options.pagination, $element), $paginationLinks = $("a", $pagination), //... $paginationLinks.on("click", function(e) { e.preventDefault(); var $a = $(this), elemIndex = $a.index(); // DOM numerical index $.fn.slideshow.index = elemIndex; if($.fn.slideshow.index > 0) { $previous.show(); } else { $previous.hide(); } if($.fn.slideshow.index == total - 1) { $.fn.slideshow.index = total - 1; $next.hide(); } else { $next.show(); } slideTo($.fn.slideshow.index, $element); $a.addClass("current"). siblings().removeClass("current"); }); }); }; //... })(jQuery);

Сразу видно, что изменилась видимость курсора – теперь индекс объявлен как свойство объекта слайд-шоу. Таким образом мы избегаем проблем с областью видимости, которые могут быть созданы обратными вызовами в jQuery. Теперь курсор доступен везде, и даже вне пространства имён плагина, поскольку он объявлен как публичное свойство объекта slideshow.

Метод.index() даёт числовой индекс каждой ссылки.

В чистом JS нет такого метода, так что проще использовать атрибуты данных:

(function() { function Slideshow(element) { this.el = document.querySelector(element); this.init(); } Slideshow.prototype = { init: function() { this.wrapper = this.el.querySelector(".slider-wrapper"); this.slides = this.el.querySelectorAll(".slide"); this.previous = this.el.querySelector(".slider-previous"); this.next = this.el.querySelector(".slider-next"); this.navigationLinks = this.el.querySelectorAll(".slider-pagination a"); this.index = 0; this.total = this.slides.length; this.setup(); this.actions(); }, //... setup: function() { var self = this; //... for(var k = 0; k < self.navigationLinks.length; ++k) { var pagLink = self.navigationLinks[k]; pagLink.setAttribute("data-index", k); // Или pagLink.dataset.index = k; } }, //... }; })();

Теперь мы можем соединить наши процедуры со ссылками и использовать только что созданные атрибуты данных:

Actions: function() { var self = this; //... for(var i = 0; i < self.navigationLinks.length; ++i) { var a = self.navigationLinks[i]; a.addEventListener("click", function(e) { e.preventDefault(); var n = parseInt(this.getAttribute("data-index"), 10); // Или var n = parseInt(this.dataset.index, 10); self.index = n; if(self.index == 0) { self.index = 0; self.previous.style.display = "none"; } if(self.index > 0) { self.previous.style.display = "block"; } if(self.index == self.total - 1) { self.index = self.total - 1; self.next.style.display = "none"; } else { self.next.style.display = "block"; } self._slideTo(self.index); self._highlightCurrentLink(this); }, false); } }

Slider-wrapper { width: 9999px; height: 683px; position: relative; transition: left 500ms linear; }

Если у нас слайдов будет много, то 9999 может не хватить. Нужно на лету подстраивать размеры для слайдов на основании ширины каждого из них и их количества.

На jQuery это просто:

// Слайд-шоу на всю ширину return this.each(function() { var $element = $(this), total = $(options.slides).length; //... $(options.slides, $element).width($(window).width()); $(options.wrapper, $element).width($(window).width() * total); //... });

Берём ширину окна и задаём ширину каждого слайда. Общая ширина внутреннего враппера получается перемножением ширины окна и количества слайдов.

// Слайд-шоу фиксированной ширины return this.each(function() { var $element = $(this), total = $(options.slides).length; //... $(options.wrapper, $element).width($(options.slides).eq(0).width() * total); //... });

Здесь начальная ширина задана шириной каждого слайда. Нужно только задать общую ширину враппера.

Теперь внутренний контейнер достаточно широк. На чистом JS это делается примерно так же:

// Слайд-шоу на всю ширину Slideshow.prototype = { init: function() { this.wrapper = this.el.querySelector(".slider-wrapper"); this.slides = this.el.querySelectorAll(".slide"); //... this.total = this.slides.length; this.setDimensions(); this.actions(); }, setDimensions: function() { var self = this; // Viewport"s width var winWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var wrapperWidth = winWidth * self.total; for(var i = 0; i < self.total; ++i) { var slide = self.slides[i]; slide.style.width = winWidth + "px"; } self.wrapper.style.width = wrapperWidth + "px"; }, //... }; // Слайд-шоу фиксированной ширины Slideshow.prototype = { init: function() { this.wrapper = this.el.querySelector(".slider-wrapper"); this.slides = this.el.querySelectorAll(".slide"); //... this.total = this.slides.length; this.setDimensions(); this.actions(); }, setDimensions: function() { var self = this; var slideWidth = self.slides.offsetWidth; // Single slide"s width var wrapperWidth = slideWidth * self.total; self.wrapper.style.width = wrapperWidth + "px"; }, //... };

В чистом JS лучше всего работать со свойством opacity и использовать стек позиционирования CSS. Тогда изначально слайд будет видимым (opacity: 1), а другие - спрятаны (opacity:0).

Следующий набор стилей демонстрирует такой способ:

Slider { width: 100%; overflow: hidden; position: relative; height: 400px; } .slider-wrapper { width: 100%; height: 100%; position: relative; } .slide { position: absolute; width: 100%; height: 100%; opacity: 0; } .slider-wrapper > .slide:first-child { opacity: 1; }

В чистом JS необходимо зарегистрировать переход CSS каждого слайда:

Slide { float: left; position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 500ms linear; }

С jQuery для использования методов fadeIn() и fadeOut() надо менять opacity и display:

Slide { float: left; position: absolute; width: 100%; height: 100%; display: none; } .slider-wrapper > .slide:first-child { display: block; }

В jQuery код следующий:

(function($) { $.fn.slideshow = function(options) { options = $.extend({ wrapper: ".slider-wrapper", previous: ".slider-previous", next: ".slider-next", slides: ".slide", nav: ".slider-nav", speed: 500, easing: "linear" }, options); var slideTo = function(slide, element) { var $currentSlide = $(options.slides, element).eq(slide); $currentSlide. animate({ opacity: 1 }, options.speed, options.easing). siblings(options.slides). css("opacity", 0); }; //... }; })(jQuery);

При анимации opacity нужно также поменять значения этого свойства для остальных слайдов.

В JavaScript это будет:

Slideshow.prototype = { //... _slideTo: function(slide) { var currentSlide = this.slides; currentSlide.style.opacity = 1; for(var i = 0; i < this.slides.length; i++) { var slide = this.slides[i]; if(slide !== currentSlide) { slide.style.opacity = 0; } } }, //... };

Видео включаются через iframe. Это такой же заменяемый inline-block, как и картинка. Заменяемый – потому, что содержимое взято из внешнего источника.

Чтобы создать полностраничное слайд-шоу, надо поменять стили следующим образом:

Html, body { margin: 0; padding: 0; height: 100%; min-height: 100%; /* Высота должна быть со всю страницу */ } .slider { width: 100%; overflow: hidden; height: 100%; min-height: 100%; /* Высота и ширина на полную */ position: absolute; /* Абсолютное позиционирование */ } .slider-wrapper { width: 100%; height: 100%; /* Высота и ширина на полную */ position: relative; } .slide { float: left; position: absolute; width: 100%; height: 100%; } .slide iframe { display: block; /* Блочный элемент */ position: absolute; /* Абсолютное позиционирование */ width: 100%; height: 100%; /* Высота и ширина на полную */ }

Когда курсор достигнет максимального количества слайдов, его надо обнулить.

Бесконечные слайд-шоу быстро надоедают пользователям. Лучше всего останавливать анимацию, когда пользователь наводит на неё курсор мыши, и восстанавливать, когда курсор уходит.

(function($) { $.fn.slideshow = function(options) { options = $.extend({ slides: ".slide", speed: 3000, easing: "linear" }, options); var timer = null; // Таймер var index = 0; // Курсор var slideTo = function(slide, element) { var $currentSlide = $(options.slides, element).eq(slide); $currentSlide.stop(true, true). animate({ opacity: 1 }, options.speed, options.easing). siblings(options.slides). css("opacity", 0); }; var autoSlide = function(element) { // Инициализируем последовательность timer = setInterval(function() { index++; // Увеличим курсор на 1 if(index == $(options.slides, element).length) { index = 0; // Обнулим курсор } slideTo(index, element); }, options.speed); // Тот же интервал, что и в методе.animate() }; var startStop = function(element) { element.hover(function() { // Останавливаем анимацию clearInterval(timer); timer = null; }, function() { autoSlide(element); // Возобновляем анимацию }); }; return this.each(function() { var $element = $(this); autoSlide($element); startStop($element); }); }; })(jQuery);

Оба параметра метода.stop() установлены в true, т.к. нам не нужно создавать очередь анимации из нашей последовательности.

На чистом JS код становится проще. Регистрируем переход CSS для каждого слайда с определённой длительности:

Slide { transition: opacity 3s linear; /* 3 секунды = 3000 миллисекунд */ }

И код будет следующим:

(function() { function Slideshow(element) { this.el = document.querySelector(element); this.init(); } Slideshow.prototype = { init: function() { this.slides = this.el.querySelectorAll(".slide"); this.index = 0; // Курсор this.timer = null; // Таймер this.action(); this.stopStart(); }, _slideTo: function(slide) { var currentSlide = this.slides; currentSlide.style.opacity = 1; for(var i = 0; i < this.slides.length; i++) { var slide = this.slides[i]; if(slide !== currentSlide) { slide.style.opacity = 0; } } }, action: function() { var self = this; // Initializes the sequence self.timer = setInterval(function() { self.index++; // Увеличим курсор на 1 if(self.index == self.slides.length) { self.index = 0; // Обнулим курсор } self._slideTo(self.index); }, 3000); // Тот же интервал, что и у перехода CSS }, stopStart: function() { var self = this; // Останавливаем анимацию self.el.addEventListener("mouseover", function() { clearInterval(self.timer); self.timer = null; }, false); // Возобновляем анимацию self.el.addEventListener("mouseout", function() { self.action(); }, false); } }; })();

Для этого мы обратимся к свойству keyCode объекта event. Оно возвращает код нажатой клавиши (список кодов).

Те события, что мы прикрепляли на кнопки "Предыдущий" и "Следующий", теперь можно прикрепить на клавиши "влево" и "вправо". jQuery:

$("body").on("keydown", function(e) { var code = e.keyCode; if(code == 39) { // Стрелка влево $next.trigger("click"); } if(code == 37) { // Стрелка вправо $previous.trigger("click"); } });

На чистом JS вместо простого метода.trigger() придётся пользоваться dispatchEvent():

Document.body.addEventListener("keydown", function(e) { var code = e.keyCode; var evt = new MouseEvent("click"); // нажатие мыши if(code == 39) { // Стрелка влево self.next.dispatchEvent(evt); } if(code == 37) { // Стрелка вправо self.previous.dispatchEvent(evt); } }, false);

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

В jQuery можно создать обратный вызов так:

(function($) { $.fn.slideshow = function(options) { options = $.extend({ //... callback: function() {} }, options); var slideTo = function(slide, element) { var $currentSlide = $(options.slides, element).eq(slide); $currentSlide. animate({ opacity: 1 }, options.speed, options.easing, // Обратный вызов для текущего слайда options.callback($currentSlide)). siblings(options.slides). css("opacity", 0); }; //... }; })(jQuery);

В этом случае обратный вызов – это функция из.animate(), которая принимает текущий слайд как аргумент. Вот, как это можно использовать:

$(function() { $("#main-slider").slideshow({ callback: function(slide) { var $wrapper = slide.parent(); // Показывает текущую подпись и прячет остальные $wrapper.find(".slide-caption").hide(); slide.find(".slide-caption").show("slow"); } }); });

На чистом JS:

(function() { function Slideshow(element, callback) { this.callback = callback || function() {}; // Our callback this.el = document.querySelector(element); this.init(); } Slideshow.prototype = { init: function() { //... this.slides = this.el.querySelectorAll(".slide"); //... //... }, _slideTo: function(slide) { var self = this; var currentSlide = self.slides; currentSlide.style.opacity = 1; for(var i = 0; i < self.slides.length; i++) { var slide = self.slides[i]; if(slide !== currentSlide) { slide.style.opacity = 0; } } setTimeout(self.callback(currentSlide), 500); // Вызывает функцию по окончанию перехода } }; // })();

Функция обратного вызова определена как второй параметр конструктора. Использовать её можно так:

Document.addEventListener("DOMContentLoaded", function() { var slider = new Slideshow("#main-slider", function(slide) { var wrapper = slide.parentNode; // Показывает текущую подпись и прячет остальные var allSlides = wrapper.querySelectorAll(".slide"); var caption = slide.querySelector(".slide-caption"); caption.classList.add("visible"); for(var i = 0; i < allSlides.length; ++i) { var sld = allSlides[i]; var cpt = sld.querySelector(".slide-caption"); if(sld !== slide) { cpt.classList.remove("visible"); } } }); });

Так как ответ со стороннего сервера может быть не немедленным, надо вставлять анимацию загрузки, чтобы показать, что процесс идёт:

Предыдущий Следующий

Это может быть gif или анимация на чистом CSS:

#spinner { border-radius: 50%; border: 2px solid #000; height: 80px; width: 80px; position: absolute; top: 50%; left: 50%; margin: -40px 0 0 -40px; } #spinner:after { content: ""; position: absolute; background-color: #000; top:2px; left: 48%; height: 38px; width: 2px; border-radius: 5px; -webkit-transform-origin: 50% 97%; transform-origin: 50% 97%; -webkit-animation: angular 1s linear infinite; animation: angular 1s linear infinite; } @-webkit-keyframes angular { 0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(360deg);} } @keyframes angular { 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} } #spinner:before { content: ""; position: absolute; background-color: #000; top:6px; left: 48%; height: 35px; width: 2px; border-radius: 5px; -webkit-transform-origin: 50% 94%; transform-origin: 50% 94%; -webkit-animation: ptangular 6s linear infinite; animation: ptangular 6s linear infinite; } @-webkit-keyframes ptangular { 0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(360deg);} } @keyframes ptangular { 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} }

Шаги будут такие:
- запросить данные извне
- спрятать загрузчик
- разобрать данные
- построить HTML
- вывести слайд-шоу
- обрабатывать слайд-шоу

Допустим, мы выбираем самые свежие видео пользователя с YouTube. jQuery:

(function($) { $.fn.slideshow = function(options) { options = $.extend({ wrapper: ".slider-wrapper", //... loader: "#spinner", //... limit: 5, username: "learncodeacademy" }, options); //... var getVideos = function() { // Получить видео с YouTube var ytURL = "https://gdata.youtube.com/feeds/api/videos?alt=json&author=" + options.username + "&max-results=" + options.limit; $.getJSON(ytURL, function(videos) { // Получаем видео как объект JSON $(options.loader).hide(); // Прячем загрузчик var entries = videos.feed.entry; var html = ""; for(var i = 0; i < entries.length; ++i) { // Разбираем данные и строим строку HTML var entry = entries[i]; var idURL = entry.id.$t; var idVideo = idURL.replace("http://gdata.youtube.com/feeds/api/videos/", ""); var ytEmbedURL = "https://www.youtube.com/embed/" + idVideo + "?rel=0&showinfo=0&controls=0"; html += ""; html += ""; html += ""; } $(options.wrapper).html(html); // Выведем слайд-шоу }); }; return this.each(function() { //... getVideos(); // Обрабатываем слайд-шоу }); }; })(jQuery);

На чистом JavaScript есть лишний шаг – создание метода получения JSON:

(function() { function Slideshow(element) { this.el = document.querySelector(element); this.init(); } Slideshow.prototype = { init: function() { this.wrapper = this.el.querySelector(".slider-wrapper"); this.loader = this.el.querySelector("#spinner"); //... this.limit = 5; this.username = "learncodeacademy"; }, _getJSON: function(url, callback) { callback = callback || function() {}; var request = new XMLHttpRequest(); request.open("GET", url, true); request.send(null); request.onreadystatechange = function() { if (request.status == 200 && request.readyState == 4) { var data = JSON.parse(request.responseText); // JSON object callback(data); } else { console.log(request.status); } }; }, //... }; })();

Затем процедуры получаются схожие:

(function() { function Slideshow(element) { this.el = document.querySelector(element); this.init(); } Slideshow.prototype = { init: function() { this.wrapper = this.el.querySelector(".slider-wrapper"); this.loader = this.el.querySelector("#spinner"); //... this.limit = 5; this.username = "learncodeacademy"; this.actions(); }, _getJSON: function(url, callback) { callback = callback || function() {}; var request = new XMLHttpRequest(); request.open("GET", url, true); request.send(null); request.onreadystatechange = function() { if (request.status == 200 && request.readyState == 4) { var data = JSON.parse(request.responseText); // JSON object callback(data); } else { console.log(request.status); } }; }, //... getVideos: function() { var self = this; // Получить видео YouTube var ytURL = "https://gdata.youtube.com/feeds/api/videos?alt=json&author=" + self.username + "&max-results=" + self.limit; self._getJSON(ytURL, function(videos) { // Получаем видео как объект JSON var entries = videos.feed.entry; var html = ""; self.loader.style.display = "none"; // Прячем загрузчик for(var i = 0; i < entries.length; ++i) { // Разбираем данные и строим строку HTML var entry = entries[i]; var idURL = entry.id.$t; var idVideo = idURL.replace("http://gdata.youtube.com/feeds/api/videos/", ""); var ytEmbedURL = "https://www.youtube.com/embed/" + idVideo + "?rel=0&showinfo=0&controls=0"; html += ""; html += ""; html += ""; } self.wrapper.innerHTML = html; // Выводим слайд-шоу }); }, actions: function() { var self = this; self.getVideos(); // Обрабатываем слайд-шоу } }; })(); Добавить метки