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

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

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
    });
}

下载地址

本站内容转自网络,若侵犯了你的权益,请联系我们,我们将在第一时间删除。

如若转载,请注明出处:http://www.ntuku.com/14241.html