html/jq介绍公司产品图的最佳排列方式,threesixty.js-360度产品图片预览jQuery插件

threesixty-slider是一款可以制作360度产品图片预览的jQuery插件。该360度图片预览插件可以逐帧播放，也可以进行自动播放，还可以制作出响应式和基于HTML5的全屏图片效果。它的特点还有：

动画过渡无缝平滑。

大量的定制参数可以选择。

可使用API进行交互。

可以通过鼠标进行交互。

自定义行为调整。

支持移动触摸设备。

易于集成。

兼容IE6+的所有现代浏览器。

安装

可以通过bower来安装该360度产品图片预览插件。

bower install threesixty-slider

使用方法

下载压缩包，在页面中引入jquery，threesixty.min.js和threesixty.css文件。

HTML结构

360度产品图片预览特效的基本HTML结构如下：

0%

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该360度产品图片预览插件。

window.onload = init;

var product;

function init(){

product1 = $('.product1').ThreeSixty({

totalFrames: 72, // Total no. of image you have for 360 slider

endFrame: 72, // end frame for the auto spin animation

currentFrame: 1, // This the start frame for auto spin

imgList: '.threesixty_images', // selector for image list

progress: '.spinner', // selector to show the loading progress

imagePath:'assets/product1/', // path of the image assets

filePrefix: 'ipod-', // file prefix if any

ext: '.jpg', // extention for the assets

height: 265,

width: 400,

navigation: true,

disableSpin: true // Default false

});

}

配置参数

threesixty-slider插件的可用配置参数有：

参数

默认值

类型

描述

totalFrames

180

Number

设置360度旋转的总帧数

currentFrame

1

Number

设置自动播放开始的帧

endFrame

180

Number

设置自动播放结束的帧

framerate

60

Number

设置播放的帧率

filePrefix

''

String

图片的前缀，例如你的图片为nike_boot_1.png，那么前缀为nike_boot_

ext

png

String

图片文件的扩展名

height

300

Number

容器的高度

width

300

Number

容器的宽度

style

{}

Object

样式对象，类似于jQuery.css({})

navigation

true

Boolean

是否开启导航控制

autoplayDirection

1

Number

控制播放的方向，可以设置为1或-1

drag

true

Boolean

设置为false则禁用鼠标和移动触摸事件

disableSpin

false

Boolean

是否在初始化时禁用loading指示器

zeroPadding

false

Boolean

true will add 0 padding for file names 1 - 9

responsive

false

Boolean

是否开启响应式图片

onReady

function() {}

Function

当所有图片加载完毕后触发

方法

方法名称

描述

.play()

自动播放

.stop()

停止自动播放

.next()

播放下一帧

.previous()

播放前一帧

.gotoAndPlay()

播放指定的帧