插件描述：可以逐帧播放，也可以进行自动播放，还可以制作出响应式和基于HTML5的全屏图片效果。
安装
可以通过bower来安装该360度产品图片预览插件。
bower install threesixty-slider
使用方法
下载压缩包，在页面中引入jquery，threesixty.min.js和threesixty.css文件。
1 2 3 | <link href="css/threesixty.css" rel="stylesheet" /><script src="js/jquery.min.js"></script><script src="js/threesixty.min.js"></script> |
HTML结构
360度产品图片预览特效的基本HTML结构如下：
1 2 3 4 5 6 | <div class="threesixty product1"> <div class="spinner"> <span>0%</span> </div> <ol class="threesixty_images"></ol></div> |
初始化插件
在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该360度产品图片预览插件。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 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 });} |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 下拉四级联动插件
- 下一个特效： 分享一个 Bootstrap3 响应式的单页小站