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

当前位置:主页 > jQuery库 > 图片效果 > 360度图片旋转产品预览展示js插件
360度图片旋转产品预览展示js插件
分享:

    插件介绍

    这是一款360度图片旋转产品预览展示js插件。该360度图片旋转产品预览js插件提供多种控制产品图片旋转的方法,包括自动旋转,通过按钮来控制旋转,通过鼠标拖拽或鼠标移动来控制旋转,通过鼠标滚轮来控制旋转等。

    浏览器兼容性

    浏览器兼容性
    时间:2018-01-12
    阅读:
简要教程

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