threesixty-slider 是一款可以制作 360 度产品图片预览的 jQuery 插件。该 360 度图片预览插件可以逐帧播放,也可以进行自动播放,还可以制作出响应式和基于 HTML5 的全屏图片效果。它的特点还有:
动画过渡无缝平滑
大量的定制参数可以选择
可使用 API 进行交互
可以通过鼠标进行交互
自定义行为调整
支持移动触摸设备
易于集成
兼容 IE6+的所有现代浏览器
下载压缩包,在页面中引入 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>
360 度产品图片预览特效的基本 HTML 结构如下:
<div class="threesixty product1">
<div class="spinner">
<span>0%</span>
</div>
<ol class="threesixty_images"></ol>
</div>
在页面 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() | 播放指定的帧 |
Github 地址:https://github.com/creativeaura/threesixty-slider
演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务,详询在线客服!