threesixty.js360度产品图片预览jQuery插件

 662去下载

jQuery插件-threesixty.js360度产品图片预览插件,可以逐帧播放,也可以进行自动播放,还可以制作出响应式和基于HTML5的全屏图片效果。


threesixty.js360度产品图片预览jQuery插件


可以通过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: 52,
        endFrame: 30,
        currentFrame: 1,
        imgList: '.threesixty_images',
        progress: '.spinner',
        imagePath: 'img/car/',
        filePrefix: '',
        ext: '.png',
        height: 447,
        width: 1000,
        navigation: true,
        disableSpin: false
    });
}


本文网址:https://www.zztuku.com/detail-12827.html
转载请声明来自:站长图库 - threesixty.js360度产品图片预览jQuery插件


使用声明:

1、本站所有素材,仅限学习交流,请勿用于商业用途。

2、本站资源大多无解压密码,如遇需要解压密码,无特殊说明,均为:zztuku.com

3、下载积分可通过日常 签到绑定邮箱 等途径免费获得!

4、本站提供的源码、模板、软件工具等其他资源,均不包含技术服务,请大家谅解!由于资源大多存储在云盘,如出现链接失效请评论反馈。

5、如果素材损害你的权益,请 联系我们 给予处理。

评论(0)条

您还没有登录,请 登录 后发表评论!

提示:请勿发布广告垃圾评论,否则封号处理!!

    猜你喜欢