
演 示
免费下载
简介
```
##### CSS样式
添加下面的CSS样式。
```html
#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度图片旋转预览插件。
```html
var path = './img/';
pdt360DegViewer('product_id', 51, './img/', 'png', true, true, false, false, false, false, false);
```
##### 配置参数
在初始化是,传入pdt360DegViewer()中的参数分别代表:
```html
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:|是否允许通过鼠标滚轮来控制旋转。|