javascript 3d 逐偵產品展示

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