Эффект вращения изображений на 360°

Наверно все из вас видели эффект на сайтах, когда можно покрутить картинку на 360° и разглядеть ее со всех сторон, этот эффект реализован с помощью jQuery. Обычно этот эффект применяют в интернет магазинах, для того, чтобы покупатель мог досконально рассмотреть желаемую покупку. В данном эффекте содержится пачка из около 50 изображений машины рассмотренных под разным углом и с помощью плагина jQuery создается ощущуние, что это единое целое и его можно покрутить на 360°. Данный эффект можно наблюдать с помощью движения мышки или включить автоматическое вращение.

Для начала вам нужно скачать папку с исходником для данного эффекта.

Шаг 1. HTML

Во-первых нам надо разметить HTML страницу для размещения на ней вращающегося изображения:

<!-- Контейнер с классом "threesixty car" для вызова вращения изображения--> <div class="threesixty car"> <!-- Счетчик загрузки пачки изображений для вращения --> <div class="spinner"> <span>0%</span> </div> <ol class="threesixty_images"></ol> </div>

Шаг 2. CSS

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

#container .threesixty { position: relative; overflow: hidden; margin: 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #container .threesixty .spinner { width: 60px; display: block; margin: 0 auto; height: 30px; background: #333; background: rgba(0, 0, 0, 0.7); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #container .threesixty .spinner span { font-family: Arial, "MS Trebuchet", sans-serif; font-size: 12px; font-weight: bolder; color: #FFF; text-align: center; line-height: 30px; display: block; } #container .threesixty .threesixty_images { display: none; list-style: none; margin: 0; padding: 0; } #container .threesixty .threesixty_images img { position: absolute; top: 0; width: 100%; height: auto; } #container .threesixty .threesixty_images img.current-image { visibility: visible; width: 100%; } #container .threesixty .threesixty_images img.previous-image { visibility: hidden; width: 0; } #container .threesixty .nav_bar { position: absolute; top: 10px; right: 10px; z-index: 11; } #container .threesixty .nav_bar a { display: block; width: 32px; height: 32px; float: left; background: url(../../assets/images/sprites.png) no-repeat; text-indent: -99999px; } #container .threesixty .nav_bar a.nav_bar_previous { background-position: 0 -73px; } #container .threesixty .nav_bar a.nav_bar_next { background-position: 0 -104px; } #container .threesixty .nav_bar a.nav_bar_play { background-position: 0 0; } #container .threesixty .nav_bar a.nav_bar_stop { background-position: 0 -37px; }

Шаг 3. JavaScript

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

<script type="text/javascript" src='src/threesixty.js'></script> <script> window.onload = init; var car; function init(){ car = $('.car').ThreeSixty({ totalFrames: 52, // Общее число кадров используемых в слайдере endFrame: 52, // Указываем последний кадр для автоостановки currentFrame: 1, // Устанавливаем стартовый кадр при инициализации imgList: '.threesixty_images', // Выбираем список изображений progress: '.spinner', // Селектор для отображения процесса загрузки imagePath:'assets/product4/', // Путь к необходимым изображениям filePrefix: '', // Префиксы ext: '.png', // Формат изображений height: 447, width: 1000, navigation: true }); } </script>

Документация:

Это список настроек плагина, которые вы можете изменять:

Методы:

.play() - Функция триггера автоматическое вращение регулятора

.stop() - Функция stop auto play

.next() - Функция перемещает ползунок к следующему кадру

.previous() - Функция перемещает ползунок к предыдущему кадру

.gotoAndPlay() - Используйте эту функцию, если вы хотите применить ползунок к отдельному кадру анимации.

Настройки:

totalFrames:180 - Число - общее количество кадров используемых при повороте на 360 градусов

currentFrame:1 - Число - устанавливаем стартовый кадр при инициализации

endFrame:180 - Число - указываем последний кадр для автоостановки

framerate:60 - Число - число кадров для анимации

filePrefix: - Строка - указываем префикс для файлов

ext:png - Строка - расширение для всех файлов используемых в слайдере

height:300 - Число - высота для контейнера со слайдером

width:300 - Число - ширина для контейнера со слайдером

style:{} - Объект - контейнер со стилями для предзагрузки

navigation:true - Логическая переменная - установите false, чтобы не показывалась навигация по умолчанию

autoplayDirection:1 - Число - направление вращения, может быть 1 или -1

dragging:true - Логическая переменная - укажите false, если хотите отключить мышь на слайдере

На этом все. Более подробно можно разобрать в исходнике.

демо

скачать

источник