JavaScript 3d Reconnaissance product display

  This article mainly introduces the JavaScript implementation of 3d-by-product display, the need for friends can refer to the following

3d Step by Step image material     JavaScript part code     code as follows: <span style= "White-space:pre" > </span>var step = 0;   Var-0;  var lth = document.queryselectorall (' #tobj img ') .length;    Window.addeventlistener (' Touchstart ', function (e) {  E.preventdefault ();  A/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; }  } -x;  document.queryselectorall (' #tobj img ') [step].style.display = ' block '  } }]   Window.addeventlistener (' Touchend ', function (e) {  e.preventdefault ();  step= step; })     Core streamlining     code as follows: 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; } } -A-x;  Nt.queryselectorall (' #tobj img ') [step].style.display = ' block '  }