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