原生js写swiperjs(电影海报滑动特效)

html部分(请在chrome 的手机模式下测试)

    
        
        
        
        
    

    
        

            

                ![](img/01.jpg)
            
            

                

                    

                        
                            ![](img/01.jpg)
                        
                    
                    

                        
                            ![](img/02.jpg)
                        
                    
                    

                        
                            ![](img/03.jpg)
                        
                    
                    

                        
                            ![](img/04.jpg)
                        
                    
                    

                        
                            ![](img/05.jpg)
                        
                    
                    

                        
                            ![](img/06.jpg)
                        
                    
                
            
        
        
    

less部分

@charset "utf-8";

*{margin: 0;padding: 0;}
li{list-style: none;}
html,body{max-width: 640px;margin: 0 auto;}
.container{width: 100vw;height: 100vh;background: #f5f5f5;position: relative;
    .bg{position: absolute;top: 0;left: 0;right: 0;bottom: 0;
        img{width: 100%;height: 100%;display: block;filter: blur(10px);}
    }
    .swiper{width: 100vw;height: 60vh;position: absolute;top: 20vh;overflow: hidden;
        ul{width: 500%;display: flex;flex-direction: row;flex-wrap: nowrap;
            li{width: 100%;height: 60vh;
                img{display: block;height: 60vh;margin: 0 auto;}
            }
        }
        
    }
}

javascript部分

var swiper = function(){
    
    var oSwiper = document.querySelector('.swiper');
    var oUl = oSwiper.querySelector('ul');
    var oLi = oUl.querySelectorAll('li');
    var liLength = oLi.length;
    var startX = '0'; //手指X位置初始化,初始化ul的translateX的位置
    var startPoint = '0'; //初始化手指对象
    var num = 0;  //初始化显示第几张
    var oW = oSwiper.offsetWidth;
    var oBg = document.getElementsByClassName('bg')[0];
    var oImg = oBg.getElementsByTagName('img')[0];
    init();
//  当前X位置 = 原先X值 + (移动量)手指
    oSwiper.addEventListener('touchstart',function(e){
//      oUl.style.transition = '';
//      console.log(e);
        startPoint = e.changedTouches[0];
        oUl.style.transition = '';
        startX = cssTransform(oUl,'translateX');
//      console.log(startX);
    },false)
    oSwiper.addEventListener('touchmove',function(e){
        var nowPoint = e.changedTouches[0]; 
        var disX = nowPoint.clientX - startPoint.clientX;
        var translateX = parseInt(startX) + parseInt(disX);
        cssTransform(oUl,'translateX',translateX);
//      console.log(translateX);
    },false)
    oSwiper.addEventListener('touchend',function(e){
        var endPoint = e.changedTouches[0];
        var l = cssTransform(oUl,'translateX');
        num = Math.round(-l/oW);
        if(num < 0){
            num = 0;
            autoPlay();
        }else if(num >= liLength){
            num = liLength-1;
            autoPlay();
        }else{
            autoPlay();
        }
        autoBg();
    })
    
    function autoPlay(){
        oUl.style.transition = '0.5s';
        cssTransform(oUl,'translateX',-num*oW);
    }
    
    function autoBg(){
        var z = oLi[num].getElementsByTagName('img')[0].src;
        oImg.transition = '0.5s';
        oImg.src = z;
        console.log(z);
    }
    
    
    
//  初始化
    function init(){
        oUl.style.width = liLength+'00%';
        cssTransform(oUl,'translateX','0');
        cssTransform(oUl,'translateY','0');
    }
    
//  封装一个transform属性
    function cssTransform(obj,attr,val){
        obj.transform = obj.transform || {};
        if(arguments.length === 3){
            obj.transform[attr] = val;
            var strVal = '';
            for(var key in obj.transform){
//              这里的key就是 transform的属性 translateX
//              这个str就是  translateX
                strVal += key+'('+obj.transform[key]+'px)';
            }
            obj.style.transform = strVal;
        }else if(arguments.length === 2){
            val = obj.transform[attr];
            if(typeof val === 'undefined'){
                val = 0;
            }
//          console.log(val)
            return val;
        }
    }
    
    
    
    
    
    
}

swiper();

下面是我用的图片

01.jpg

02.jpg

03.jpg

04.jpg

05.jpg

06.jpg