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