Портфолио JQuery слайдер изображений с пагинацией | Vladmaxi.net
ГлавнаяВеб-разработчикуJQueryПортфолио JQuery слайдер изображений с пагинацией
Дата: 15.05.2013 в 21:16 | Просмотров: 5589

Портфолио JQuery слайдер изображений с пагинацией

JQuery слайдер изображений
Скачатьбесплатно с сервера
Демодемонстрация

Сегодня я хочу поделиться с Вами тем, как создать JQuery слайдер изображений. Есть много способов, как отобразить своё портфолио, но один из самых эффективных, это табличная структура с разбиением элементов на страницы. В этом уроке мы подробно рассмотрим слайдер портфолио с эффектом листания и пагинацией. Будут использованы прелести JQuery и CSS3 Transform. Ещё советую посмотреть слайдер контента с автоматической прокруткой, который также будет, возможно, Вам полезен.

Общее положения слайдера

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

портфолио слайдер изображений - структура

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

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

HTML разметка & CSS стилизация

Мы создадим список изображений с использованием маркированного списка ul и одного div для обертки, который будет использоваться для отображения нашего портфолио изображений и будет создано с помощью JavaScript, поэтому оставляем его пустым. В качестве примера мы используем изображения от Troy Cummings, J.R. Schmidt и Dan Lehman.

Обертка содержит один div для изображений, а также один span для отображения title картинки. Следующей код будет генерироваться с помощью JavaScript:

Портфолио изображений будет табличного вида, мы также стилизуем span с прозрачным черным фоном и для div с тенями box-shadow. Поскольку портфель список не необходимый для отображения мы также установить его дисплей нет.

Мы установим фоновое изображение для div, поэтому когда происходит “листание”, фоновое изображение будет заменено новым значения.

Мы также создадим класс, который включает CSS анимацию, и этот класс будет применен при изменении изображений. Последний класс будет включать четыре эффекта переворота изображений.

И вот полученный результат:
JQuery слайдер изображений

Оживляем слайдер применив JavaScript

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

После клика пользователю на одну из цифр пагинации, будет вращаться каждый div нашего портфолио, использован эффект вращения, путем случайного выбора Math.random (), чтобы повернуть их мы будем выводить имя класса и выбранный эффект.

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

Когда анимация выполнена, мы удалим анимацию и имя класса для div.

Заключение

Итак, я думаю мы сделали все так, как хотели. Получился довольно красивый 3D эффект, и креативное портфолио изображений. Пример демо Вы можете увидеть по ссылке выше, вначале статьи. Наслаждайтесь!


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://www.webstuffshare.com
Перевел: Владислав Бондаренко


ВСЕ КОММЕНТАРИИ

    1. exasteCushews:
      http://www.bookmaker-bet.com

      Очень хорошо.

Добавить комментарий