浙江 杭州

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

系统分类: 网页特效 - jquery插件 - jQuery图片展示/幻灯片 2017-02-09

人气2808

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


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 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() 播放指定的帧

threesixty-slider插件的github地址为:https://github.com/creativeaura/threesixty-slider

查看演示
下载资源:6
下载资源
错误提交:

格式:zip 大小:3.43M

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1589.html 非特殊说明,本文版权归原作者所有,转载请注明出处
threesixty.js-360度产品图片预览jQuery插件

我当前G币余额:0 已下载次数:6

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

点击右侧分享按钮并且进行评论 +10G币(已有2 评论)