<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>360度图片旋转产品预览展示js插件</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="htmleaf-container">
<header class="htmleaf-header">
<h1>360度图片旋转产品预览展示js插件 <span>360 Degree Product Viewer using plain JavaScript</span></h1>
<div class="htmleaf-links">
<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.jb51.net/" title="脚本之家" target="_blank"><span> 脚本之家</span></a>
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.jb51.net/" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
</div>
</header>
<div id="pdtViewer">
<h3>自动旋转（可通过按钮来控制产品的旋转）</h3>
<div id="car0"></div>
<h3>点击开始按钮，然后通过按钮来控制产品的旋转</h3>
<div id="car1"></div>
<h3>自动旋转（不能控制）</h3>
<div id="car2"></div>
<h3>通过鼠标拖拽来控制旋转</h3>
<div id="car3"></div>
<h3 class="hidePhone">通过鼠标移动位置来控制旋转</h3>
<div id="car4"></div>
<h3>通过导航按钮来控制旋转</h3>
<div id="car5"></div>
<h3 class="hidePhone">点击图片，并通过键盘方向键来控制旋转</h3>
<div id="car6"></div>
<h3 class="hidePhone">通过鼠标滚轮来控制旋转</h3>
<div id="car7"></div>
</div>
<div id="dummy"></div>
</div>
<script src="js/pdt360DegViewer.js"></script>
<script type="text/javascript">
var path = './img/';
//pdt360DegViewer(imgDivid, count, path, imgType, playable, autoPlay, drag, mouseMove, buttonNavigation, keyNavigation, scroll);
pdt360DegViewer('car0', 51, path, 'png', true, true, false, false, false, false, false); //playable autoPlay
pdt360DegViewer('car1', 51, path, 'png', true, false, false, false, false, false, false); //playable
pdt360DegViewer('car2', 51, path, 'png', false, true, false, false, false, false, false); //autoPlay
pdt360DegViewer('car3', 51, path, 'png', false, false, true, false, false, false, false); //draggable
pdt360DegViewer('car4', 51, path, 'png', false, false, false, true, false, false, false); //mouseMove
pdt360DegViewer('car5', 51, path, 'png', false, false, false, false, true, false, false); //buttonNavigation
pdt360DegViewer('car6', 51, path, 'png', false, false, false, false, false, true, false); //keys
pdt360DegViewer('car7', 51, path, 'png', false, false, false, false, false, false, true); //scroll
</script>
</body>
</html>
JS实现360度图片旋转产品预览展示js插件.zip
版权申诉
3 浏览量
2022-11-01
01:00:40
上传
评论
收藏 3.28MB ZIP 举报
JS实现360度图片旋转产品预览展示js插件.zip （62个子文件） 
132689952450871478 js360xz css 
htmleaf-demo.css 6KB style.css 3KB normalize.css 2KB related 
2.jpg 30KB 1.jpg 18KB img 
11.png 67KB 40.png 67KB 16.png 59KB 32.png 68KB 29.png 68KB 22.png 63KB 17.png 55KB 24.png 70KB 10.png 67KB 19.png 50KB 5.png 66KB 38.png 70KB 42.png 60KB 46.png 63KB 9.png 65KB 47.png 66KB 50.png 67KB 44.png 53KB 34.png 68KB 35.png 70KB 25.png 69KB 21.png 57KB 27.png 69KB 51.png 69KB 1.png 71KB 48.png 68KB 39.png 70KB 14.png 63KB 33.png 67KB 41.png 63KB 49.png 67KB 28.png 70KB 45.png 58KB 23.png 67KB 18.png 52KB 30.png 69KB 37.png 70KB 6.png 65KB 31.png 66KB 2.png 69KB 12.png 67KB 7.png 64KB 4.png 67KB 13.png 65KB 36.png 70KB 20.png 52KB 43.png 56KB 8.png 67KB 26.png 68KB 15.png 61KB 3.png 68KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB
index.html 3KB js pdt360DegViewer.js 9KB资源评论
