css部分

    *{
        padding: 0;
        margin: 0;
    }
    body,html{
        width: 100%;
        height: 100%;
    }
    .fulldiv{
        width: 100%;
        height: 100%;
    }
    #page1{
        background: red;
        display: block;
    }
    #page2{
        background: green;
        display: none;
        position: relative;
        opacity: 0;
    }
    #test{
        width: 100px;
        height: 100px;
        border: 2px solid black;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
    #wenzi{
        width: 300px;
        height: 40px;
        font-size: 25px;
        border: 2px solid black;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
    #page3{
        background: skyblue;
        display: none;
    }
</style>

html部分

<div class="fulldiv" id="page1">
    <div id="wenzi">1%</div>
</div>
<div class="fulldiv" id="page2">
    <div id="test">666</div>
</div>
<div class="fulldiv" id="page3">
    <div id="wenzi">
        here is 3 page
    </div>
</div>
<script type="text/javascript">
    function by(element){
        var newElement = document.getElementById(element);
        return newElement;
    }
    document.onreadystatechange = function (){
        if(document.readyState == "loading"){
            by("wenzi").innerHTML = "25%";
        }else if(document.readyState == "interactive"){
            by("wenzi").innerHTML = "50%";
        }else if(document.readyState == "complete"){
            var num = 66;
            var st = setInterval(function(){
                num+=Math.round(Math.random()*10);
                by("wenzi").innerHTML = num+"%";
                if(num>=95){
                    by("wenzi").innerHTML = 100+"%";
                    clearInterval(st);
                    changePage("page1","page2");
                }
            },1200);
        }
    }
    function fadeOut(element){
        var speed = speed || 30;
        var num = 10;
        var st = setInterval(function(){
            num--;
            by(element).style.opacity = num/10;
            by(element).style.display = "none";
            if(num<=0){
                clearInterval(st);
            }
        },speed);
    }
    function fadeIn(element,speed){
        var speed = speed || 30;
        var num =0;
        var st = setInterval(function(){
            by(element).style.display = "block";
            num++;
            by(element).style.opacity = num/10;
            if(num>=10){
                clearInterval(st);
            }
        },speed);
    }
    function changePage(firstElement,secondElement){
        fadeOut(firstElement);
        fadeIn(secondElement);
    }
    var startx,starty,endx,endy;
    document.addEventListener("touchstart",function(e){
        startx = Math.round(e.touches[0].pageX);
        starty = Math.round(e.touches[0].pageY);
        console.log(starty);
    },false);
    document.addEventListener("touchend",function(e){
        endx = Math.round(e.changedTouches[0].pageX);
        endy = Math.round(e.changedTouches[0].pageY);
        var result = getResult();
        updatePage(result,"page2","page3");
    },false);
    function getResult(){
        // only by the the value is 1 can be allowed 
        var value = 0;
        if(((starty-endy)/starty)*100>=20){
            if((Math.abs(startx-endx)/startx)*100<=30){
                value = 1;
            }
        }else{
            console.log("not allow");
        }
        return value;
    }
    function updatePage(key,element1,element2){
        var result = key;
        if(result==1){
            changePage(element1,element2);
        }
    }
</script>