threesixty.js-360度产品图片预览

引入外部css:

<link rel="stylesheet" href="https://download.shengli.com/ui/control/scroll_3d/css/threesixty.css">

引入外部js:

<script type="text/javascript" src="https://download.shengli.com/ui/js/jquery.min.js"></script>

<script type="text/javascript" src="https://download.shengli.com/ui/control/scroll_3d/js/threesixty.min.js"></script>

备注：详细用法见demo。

配置参数

threesixty-slider插件的可用配置参数有：
totalFrames:52  设置360度旋转的总帧数（图片索引）
currentFrame:1  设置自动播放开始的帧（出现的播放。。。）（图片索引）
endFrame:51  设置自动播放结束的帧（出现的播放。。。）（图片索引）
framerate:60  设置播放的帧率（出现的播放。。。）
filePrefix:''  图片的前缀，例如你的图片为nike_boot_1.png，那么前缀为nike_boot_
ext:png  图片文件的扩展名
height:300  容器的高度
width:30  容器的宽度
style{}  样式对象，类似于jQuery.css({})
navigation:false 是否开启导航控制
autoplayDirection:-1  控制播放的方向，可以设置为1或-1
drag:true   设置为false则禁用鼠标和移动触摸事件
disableSpin:true   是否在初始化时禁用loading指示器（是否显示开始时的图片播放进度（从currentFrame:1到endFrame:51）,默认为false，表示显示）
zeroPadding:true   true will add 0 padding for file names 1 - 9
responsive:true 是否开启响应式图片
onReady:function(){}    当所有图片加载完毕后触发
方法
方法名称    描述
.play() 自动播放
.stop() 停止自动播放
.next() 播放下一帧
.previous() 播放前一帧
.gotoAndPlay()  播放指定的帧
threesixty-slider插件的github地址为：https://github.com/creativeaura/threesixty-slider