这是一款360度图片旋转产品预览展示js插件。该360度图片旋转产品预览js插件提供多种控制产品图片旋转的方法,包括自动旋转,通过按钮来控制旋转,通过鼠标拖拽或鼠标移动来控制旋转,通过鼠标滚轮来控制旋转等。
使用方法
在页面中引入pdt360DegViewer.js文件。
<script src="js/pdt360DegViewer.js"></script>
HTML结构
使用一个<div>
元素作为旋转产品图片的容器。
<divid="product_id"></div>
CSS样式
添加下面的CSS样式。
#pdtViewer.container { width: 67%; height: 450px; margin: 0 auto; border: 0.5px solid #eee; } #pdtViewer img { padding: 40px 20px; } @media screen and (max-width:1250px) { #pdtViewer img { width: 100%; } } #pdtViewer .nxt { left: 85%; } #pdtViewer .prev { left: 12%; } #pdtViewer button { position: absolute; top: 57%; background: none; border-radius: 30px; padding: 0; font-weight: bold; font-size: 30px; width: 50px; cursor: pointer; height: 52px; box-shadow: 0 6px 15px #aaa; } #pdtViewer button:focus { outline: 0; } #dummy { display: none; } #loader { width: 67%; height: 450px; position: absolute; background: rgba(0,0,0,0.5); } .three-bounce { text-align: center; font-size: 26px; position: absolute; top: 50%; left: 50%; } .three-bounce div { display: inline-block; width: 18px; height: 18px; border-radius: 100%; background-color: #fff; -webkit-animation: bouncedelay 1.4s infinite ease-in-out both; animation: bouncedelay 1.4s infinite ease-in-out both; } .three-bounce .one { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .three-bounce .two { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { transform: scale(1); -webkit-transform: scale(1); } }
初始化插件
然后通过下面的方法来初始化该360度图片旋转预览插件。
var path = './img/'; pdt360DegViewer('product_id', 51, './img/', 'png', true, true, false, false, false, false, false);
配置参数
在初始化是,传入pdt360DegViewer()
中的参数分别代表:
pdt360DegViewer(imgDivid, count, path, imgType, playable, autoPlay, drag, mouseMove, buttonNavigation, keyNavigation, scroll);
-
imgDivid
:容器的ID。 -
count
:产品图片的数量。 -
path
:产品图片存放的路径。 -
imgType
:产品图片的类型,如'png', 'jpg', 'gif'等。 -
playable
:是否允许控制旋转。 -
autoPlay
:是否自动旋转。 -
drag
:是否允许通过鼠标拖拽来控制旋转。 -
mouseMove
:是否允许通过鼠标移动来控制旋转。 -
buttonNavigation
:是否显示前后导航按钮。 -
keyNavigation
:是否允许通过键盘方向键来控制旋转。 -
scroll
:是否允许通过鼠标滚轮来控制旋转。
该360度图片旋转产品预览js插件的github地址为:https://github.com/Jeya-Prakash/3D-Product-Viewer-JavaScript-Plugin
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!