threesixty.js

threesixty.js 介绍

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

动画过渡无缝平滑。

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

可使用API进行交互。

可以通过鼠标进行交互。

自定义行为调整。

支持移动触摸设备。

易于集成。

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

安装

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

bower install threesixty-slider

使用方法

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

<link href="css/threesixty.css" rel="stylesheet" />

<script src="js/jquery.min.js"></script>

<script src="js/threesixty.min.js"></script>

html结构

360度产品图片预览特效的基本html结构如下：<div><div><span>0%</span></div><ol></ol></div>

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该360度产品图片预览插件。window.onload = init;var product;function init(){product1 = $('.product1').ThreeSixty({totalFrames: 72,// Total no. of image you have for 360 sliderendFrame: 72,// end frame for the auto spin animationcurrentFrame: 1,// This the start frame for auto spinimgList: '.threesixty_images',// selector for image listprogress: '.spinner',// selector to show the loading progressimagePath:'assets/product1/',// path of the image assetsfilePrefix: 'ipod-',// file prefix if anyext: '.jpg',// extention for the assetsheight: 265,width: 400,navigation: true,disableSpin: true // Default false});}

配置参数

threesixty-slider插件的可用配置参数有：参数默认值类型描述totalFrames180Number设置360度旋转的总帧数currentFrame1Number设置自动播放开始的帧endFrame180Number设置自动播放结束的帧framerate60Number设置播放的帧率filePrefix''String图片的前缀，例如你的图片为nike_boot_1.png，那么前缀为nike_boot_extpngString图片文件的扩展名height300Number容器的高度width300Number容器的宽度style{}Object样式对象，类似于jQuery.css({})navigationtrueBoolean是否开启导航控制autoplayDirection1Number控制播放的方向，可以设置为1或-1dragtrueBoolean设置为false则禁用鼠标和移动触摸事件disableSpinfalseBoolean是否在初始化时禁用loading指示器zeroPaddingfalseBooleantrue will add 0 padding for file names 1 - 9responsivefalseBoolean是否开启响应式图片onReadyfunction() {}Function当所有图片加载完毕后触发

方法

方法名称描述.play()自动播放.stop()停止自动播放.next()播放下一帧.previous()播放前一帧.gotoAndPlay()播放指定的帧链接: http://www.fly63.com/nav/2313

网站地址:http://ww1.360slider.com/

GitHub:https://github.com/creativeaura/threesixty-slider

网站描述:360度产品图片预览jQuery插件

threesixty.js

官方网站：http://ww1.360slider.com/

小编说

以上是编程之家为你收集整理的threesixty.js全部内容。

如果觉得编程之家网站内容还不错，欢迎将编程之家推荐给好友。