图片/图形

threesixty 360度产品图片预览jQuery插件

阿里云


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

动画过渡无缝平滑

也想出现在这里?联系我们
创客主机

大量的定制参数可以选择

可使用 API 进行交互

可以通过鼠标进行交互

自定义行为调整

支持移动触摸设备

易于集成

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

使用方法

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

  1. <link href="css/threesixty.css" rel="stylesheet" />
  2. <script src="js/jquery.min.js"></script>
  3. <script src="js/threesixty.min.js"></script>

HTML 结构

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

  1. <div class="threesixty product1">
  2.     <div class="spinner">
  3.         <span>0%</span>
  4.     </div>
  5.     <ol class="threesixty_images"></ol>
  6. </div>

初始化插件

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

  1. window.onload = init;
  2.  
  3. var product;
  4. function init(){
  5.  
  6.     product1 = $('.product1').ThreeSixty({
  7.         totalFrames: 72, // Total no. of image you have for 360 slider
  8.         endFrame: 72, // end frame for the auto spin animation
  9.         currentFrame: 1, // This the start frame for auto spin
  10.         imgList: '.threesixty_images', // selector for image list
  11.         progress: '.spinner', // selector to show the loading progress
  12.         imagePath:'assets/product1/', // path of the image assets
  13.         filePrefix: 'ipod-', // file prefix if any
  14.         ext: '.jpg', // extention for the assets
  15.         height: 265,
  16.         width: 400,
  17.         navigation: true,
  18.         disableSpin: true // Default false
  19.     });
  20.  
  21. }

配置参数

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

threesixty 360 度产品图片预览 jQuery 插件

已有 437 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(2)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!