移动端轮播插件

<div class="slider">
    <div class="pic" id="pic">
        <div id="bg1" class="bg fadein"></div>
        <div id="bg2" class="bg"></div>
        <div id="bg3" class="bg"></div>
        <div id="bg4" class="bg"></div>
        <div id="bg5" class="bg"></div>
    </div>
    <ul class="btn" id="btn">
        <li class="active"></li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>


css

.slider{position:relative;width:100%;height:100%}
.bg{position:absolute;left:0;top:0;width:100vw;height:100vh;opacity:0;filter:alpha(opacity=0);-webkit-transition:opacity 1s linear;-moz-transition:opacity 1s linear;-ms-transition:opacity 1s linear;-o-transition:opacity 1s linear;transition:opacity 1s linear}
#bg1{background:url(https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/super/whfpf%3D425%2C260%2C50/sign=5b8ce96a0af431adbc8710792d0b989d/63d9f2d3572c11df40d7b3db652762d0f603c2c0.jpg) no-repeat;background-size:cover}
#bg2{background:url(https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/super/whfpf%3D425%2C260%2C50/sign=bbc9424198510fb3784c24d7bf0efca7/9825bc315c6034a803dbb479cd13495409237608.jpg) no-repeat;background-size:cover}
#bg3{background:url(https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/super/whfpf%3D425%2C260%2C50/sign=2725a1ea740e0cf3a0a21dbb6c7bc62d/faedab64034f78f04041960b7f310a55b2191cfb.jpg) no-repeat;background-size:cover}
#bg4{background:url(https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/super/whfpf%3D425%2C260%2C50/sign=5b8ce96a0af431adbc8710792d0b989d/63d9f2d3572c11df40d7b3db652762d0f603c2c0.jpg) no-repeat;background-size:cover}
#bg5{background:url(https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/super/whfpf%3D425%2C260%2C50/sign=bbc9424198510fb3784c24d7bf0efca7/9825bc315c6034a803dbb479cd13495409237608.jpg) no-repeat;background-size:cover}
*{margin:0;padding:0}
.btn{position:fixed;bottom:50px;width:100%;height:30px;text-align:center}
.btn li{float:left;width:20%;height:5px;text-indent:-999px;background:grey}
.fadein{opacity:1;filter:alpha(opacity=100)}
.btn li.active{background:red}
li{list-style-type:none}
.pic{width:100vw;height:100vh}
.box{width:400px;height:400px;background:red}
body{height:3000px}

js

var pic=document.getElementById(‘pic‘);
var touchx= 0,
    alreadymove=true,
    currentimg= 0,
    imglen=document.getElementsByClassName(‘bg‘).length;

pic.addEventListener(‘touchstart‘, function (e) {
    e.preventDefault();
    if(alreadymove){
        var touched= e.touches[0];
        touchx= touched.pageX;
        alreadymove=false;
    }
},false);
pic.addEventListener(‘touchmove‘, function (e) {
    if(!alreadymove){
        var touched= e.changedTouches[0];
        var offsetX=touched.pageX;
        if(offsetX+20 <touchx){
            if( currentimg >= imglen-1){
                currentimg=0;
            }else{
                currentimg++;
            }
            showpic(currentimg);
            alreadymove=true;
        }
        if(offsetX-20 >touchx){
            if(currentimg<=0){
                currentimg=imglen-1;
            }else{
                currentimg--;
            }
            showpic(currentimg);
            alreadymove=true;
        }
    }
},false);
pic.addEventListener(‘touchend‘, function (e) {
    e.preventDefault();
},false);


function showpic(index){
    /*hide all pic first*/
    hideall();
    /*show the index pic*/
    var allpic=document.getElementsByClassName(‘bg‘);
    allpic[index].classList.add(‘fadein‘);

    /*show the index btn*/
    showbtn(index);
}
function hideall(){
    var allpic=document.getElementsByClassName(‘bg‘);
    Array.prototype.forEach.call(allpic, function (element,index,array) {
        element.classList.remove(‘fadein‘);
    });
}

function showbtn(index){
    var btns=document.getElementById(‘btn‘).getElementsByTagName(‘li‘);
    Array.prototype.forEach.call(btns, function (element,index,array) {
       element.classList.remove(‘active‘);
    });
    btns[index].classList.add(‘active‘);
}