swiper-land(banner图)

html

    
        
        
        
        
    
    
        
        

            

                
![](img-land/01.jpg)
                
![](img-land/02.jpg)
                
![](img-land/03.jpg)
                
![](img-land/04.jpg)
                
![](img-land/05.jpg)
                
![](img-land/06.jpg)
            
        
        
    

less

@charset "utf-8";
*{margin: 0;padding: 0;}
li{list-style: none;}
#swiper{width: 100%;height: 200px;overflow: hidden;
    .swiper-box{width: 600%;height: 100%;display: flex;flex-direction: row;flex-wrap: nowrap;
        li{width: 100%;height: 100%;flex-basis: 100%;
            img{width: 100%;height: 100%;display: block;}
        }
    }
}

javascript

var oswiper = document.getElementById('swiper');
var oswiperbox = oswiper.getElementsByClassName('swiper-box')[0];
var oli = oswiperbox.getElementsByTagName('li');

var starX = '';
var startranslateX;
var num = 0;

init();

oswiperbox.addEventListener('touchstart',function(e){
    var starpoint = e.changedTouches[0];
    starX = starpoint.clientX;
    oswiperbox.style.transition = '';
    startranslateX = cssTransform(oswiperbox,'translateX');
})
oswiperbox.addEventListener('touchmove',function(e){
    var movePoint = e.changedTouches[0]
    var moveX = movePoint.clientX;
    var ll = parseInt(moveX)-parseInt(starX);
    var disx = ll+startranslateX;
    cssTransform(oswiperbox,'translateX',disx);
})
oswiperbox.addEventListener('touchend',function(e){
    var endtranslateX = cssTransform(oswiperbox,'translateX');
    num = Math.round(-endtranslateX/oswiper.offsetWidth);
    console.log(num)
    if(num >= oli.length){
        num = oli.length-1;
        autoPlay();
    }else if(num < 0){
        num = 0;
        autoPlay();
    }else{
        autoPlay();
    }
    
    
})

function autoPlay(){
    oswiperbox.style.transition = '0.5s';
    cssTransform(oswiperbox,'translateX',-num*oswiper.offsetWidth);
}



function init(){
    oswiperbox.style.width = oli.length+'00%';
    cssTransform(oswiperbox,'translateX',0);
    cssTransform(oswiperbox,'translateZ',0);
}



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){
            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;
        }
        return val;
    }
}