3d 逐侦图片 素材
javascript 部分代码

     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'
}

文章来源: javascript-3d逐侦产品展示