这是一款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：是否允许通过鼠标滚轮来控制旋转。
Github地址为：https://github.com/Jeya-Prakash/3D-Product-Viewer-JavaScript-Plugin
下载密码: dgt9
