jQuery插件-threesixty.js360度产品图片预览插件,可以逐帧播放,也可以进行自动播放,还可以制作出响应式和基于HTML5的全屏图片效果。
可以通过bower来安装该360度产品图片预览插件。
bowerinstallthreesixty-slider使用方法
下载压缩包,在页面中引入jquery,threesixty.min.js和threesixty.css文件。
<linkhref="css/threesixty.css"rel="stylesheet"/><scriptsrc="js/jquery.min.js"></script><scriptsrc="js/threesixty.min.js"></script>HTML结构
360度产品图片预览特效的基本HTML结构如下:
<divclass="threesixtyproduct1"><divclass="spinner"><span>0%</span></div><olclass="threesixty_images"></ol></div>初始化插件
在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该360度产品图片预览插件。
window.onload=init;varproduct;functioninit(){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});}
产品猿社区致力收录更多优质的商业产品,给服务商以及软件采购客户提供更多优质的软件产品,帮助开发者变现来实现多方共赢;
日常运营的过程中我们难免会遇到各种版权纠纷等问题,如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用,您可按照我们投诉流程处理,点我投诉;
本文来自用户发布投稿,不代表产品猿立场 ;若对此文有疑问或内容有严重错误,可联系平台客服反馈;
部分产品是用户投稿,可能本文没有提供官方下下载地址或教程,若您看到的内容没有下载入口,您可以在我们产品园商城搜索看开发者是否有发布商品;若您是开发者,也诚邀您入驻商城平台发布的产品,地址:点我进入;
如若转载,请注明出处:https://www.chanpinyuan.cn/35200.html;