10 908 Скрипты / Slider

Three sixty - поворот изображения на 360°

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

HTML

<div class="threesixty car">
    <div class="spinner">
        <span>0%</span>
    </div>
    <ol class="threesixty_images"></ol>
</div>

CSS

Стили плагина:

JS

Для работы плагина необходимо подключить jQuery библиотеку, сам плагин threesixty.js и указать параметры инициализации нашего слайдера:

Методы

Позволяют управлять слайдером после его инициализации:

  • .play() - функция для вызова автоматического вращения слайдера
  • .stop() - функция остановки автоматического вращения
  • .next() - функция перехода к следующему кадру слайдера
  • .previous() - функция перехода к предыдущему кадру слайдера
  • .gotoAndPlay() - используйте эту функцию для перехода к конкретному кадру слайдера

Настройки

  • totalFrames:180, - число - общее количество кадров используемых при повороте на 360 градусов
  • currentFrame:1, - число - устанавливаем стартовый кадр при инициализации
  • endFrame:180, - число - указываем последний кадр для автоостановки
  • framerate:60, - число - число кадров для анимации
  • filePrefix:'', - строка - указываем префикс для файлов, например если файлы у вас имеют название: nike_boot_1.png то префикс будет: nike_boot_
  • ext:png, - строка - расширение для всех файлов используемых в слайдере
  • height:300, - число - высота для контейнера со слайдером
  • width:300, - число - ширина для контейнера со слайдером
  • style:{}, - объект - контейнер со стилями для прелоадера, что-то похожее на jQuery.css({})
  • navigation:true, - логическая переменная - установите false, чтобы не показывалась навигация по умолчанию
  • autoplayDirection:1, - число - направление вращения, может быть 1 или -1
  • dragging:true, - логическая переменная - укажите false, если хотите отключить мышь и тач события на слайдере
Скачать 3174Загрузок 7,36 Mb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи