使用threesixty.js实现360度物品预览

最近公司网站更新，想要对商品进行360度展示，能实现手工拖拽旋转功能。恰好jQuery有个强大的插件threesixty.js可以实现这个功能。先上做好的效果图：

1.图片准备

材料：转台一个，相机一个；

过程：

    （1）根据转台速度，设置相机的连拍时间和张数，控制转360度，拍30-40张左右的照片；

    （2）直接拍摄得到的图片质量较高，可以进行适当压缩，提高加载速度 ；

    （3）对连拍的图片进行重命名：1.jpg,2.jpg,3.jpg.......，写个小脚本，批量重命名：

import os

def batRename():
    base_dir=u'D:/pic/'
    name_pre = ''
    name_num = 1
    dirlist = os.listdir(base_dir)
    for f in dirlist:
        old_file = os.path.join(base_dir,f)
        
        if os.path.isdir(old_file): continue
        suffix = f.split('.')[1]
        new_name = os.path.join(base_dir,name_pre+str(name_num)+'.'+suffix)
        os.rename(old_file, new_name)
        name_num = name_num + 1
        
if __name__ == '__main__':
    batRename()

最后得到的图片列表如下：

2.在页面中引入文件

<link type="text/css" rel="stylesheet" href="./treesixty.css">
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./threesixty.min.js"></script>

3.HTML结构

<section class="container-fluid" id="container">
  <div class="threesixty product1">
    <div class="spinner">
      <span>0%</span>
    </div>
    <ol class="threesixty_images"></ol>
  </div>

4.JS脚本

    window.onload = init;

    var product;
    function init(){

      product1 = $('.product1').ThreeSixty({
        totalFrames: 28,   //图片个数，一定要与图片个数一致
        endFrame: 28,
        currentFrame: 1,
        imgList: '.threesixty_images',
        progress: '.spinner',
        imagePath:'images/gift/',  //图片所在路径，最后一定要有/。如果图片有前缀，也可以写在/后
        filePrefix: '',
        ext: '.jpg',
        height: 667,
        width: 1000,
        navigation: true,
        disableSpin: false
      });

    }

好了，到这里就实现了，是不是简单几行代码就实现了“3D”效果？

给大家一个这个例子的链接：

http://image.yzmg.com/20200302/threesixty/index.html