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

threesixty-slider是一款可以制作360度产品图片360度旋转预览的jQuery插件。该360度图片预览插件可以逐帧播放，也可以进行自动播放，还可以制作出响应式和基于HTML5的全屏3d全景图片展示代码效果。它的特点还有：动画过渡无缝平滑、大量的定制参数可以选择、可使用API进行交互、可以通过鼠标进行交互、自定义行为调整、支持移动触摸设备、易于集成、兼容IE6+的所有现代浏览器。

分类：图片代码 > 图片插件难易：中级

查看演示下载资源下载积分： 50 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

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.js-360度产品图片预览jQuery插件

HTML结构：

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

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