360度图片旋转产品预览展示js插件

这是一款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