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>
    <div>
        <span>0%</span>
    </div>
    <ol></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插件的可用配置参数有：

方法

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/2313