您现在的位置: 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文

javascript 3d 逐侦产品展示

作者:佚名    责任编辑:admin    更新时间:2022-06-22

 这篇文章主要介绍了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'  }