javascript 3d 逐侦产品展示(核心精简)

242 阅读 0 评论 160 点赞

我是靠谱客的博主无情书包，最近开发中收集的这篇文章主要介绍javascript 3d 逐侦产品展示(核心精简)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

3d 逐侦图片素材

javascript 部分代码

复制代码代码如下:

 
<span style="white-space:pre"> </span>var step = 0; 
var first = 0; 
var lth = document.querySelectorAll('#tobj img').length; 

window.addEventListener('touchstart',function(e){ 
e.preventDefault(); 
first = e.touches[0].pageX; 
}) 
window.addEventListener('touchmove',function(e){ 
e.preventDefault(); 
var x = e.pageX || e.touches[0].pageX; 
document.getElementById('outs').innerHTML = step; 
if(Math.abs(x - first)>10){ 
document.querySelectorAll('#tobj img')[step].style.display = 'none' 
if(x<first){ 
step++; 
if(step>=lth-1){ 
step =0 
} 
}else{ 
step-- 
if(step<=0){ 
step = lth-1; 
} 
} 
first = x; 
document.querySelectorAll('#tobj img')[step].style.display = 'block' 
} 
}) 
window.addEventListener('touchend',function(e){ 
e.preventDefault(); 
step = step; 
}) 

核心精简

复制代码代码如下:

 
if(Math.abs(x - first)>10){ 
document.querySelectorAll('#tobj img')[step].style.display = 'none' 
if(x<first){ 
step++; 
if(step>=lth-1){ 
step =0 
} 
}else{ 
step-- 
if(step<=0){ 
step = lth-1; 
} 
} 
first = x; 
document.querySelectorAll('#tobj img')[step].style.display = 'block' 
} 