全屏滑动原生js版

.up{-webkit-transform:translate(0px,-100%) scale(1)}
.down{-webkit-transform:translate(0px,100%) scale(1)}
.cur{-webkit-transform:translate(0px,0px) scale(1)}
#page1,#page2,#page3{position:absolute;width:100%;height:100%;}

var win_h=document.documentElement.clientHeight;
document.getElementById('page1').style.height=win_h;
document.getElementById('page2').style.height=win_h;
document.getElementById('page3').style.height=win_h;
var begin_y=end_y=0;distance_y=0,page_index=1;
function slide_start(e){
  begin_y=end_y=e.targetTouched[0].pageY;
}
function slide_move(e){
  end_y=e.targetTouches[0].pageY;
}
function slide_end(e){
  distance_y=end_y-begin_y;
    if(distance_y<=-100){
      //此处假设总共三页,每一页的id为page1,page2,page3
      if(page_index<3){
        document.getElementById('page'+page_index).removeClass("cur").addClass('up');
        page_index++;
        document.getElementById('page'+page_index).removeClass("down").addClass("cur")
        }
     } 
     else if(distance_y>=100){
       if(page_index>1){
         document.getElementById('page'+page_index).removeClass('cur').addClass('down');
         page_index--;
         document.getElementById('page'+page_index).removeClass('up').addClass('cur');
         }
       }
}
document.body.addEventListener('touchstart',slide_start,false);
document.body.addEventListener('touchmove',slide_move,false);
document.body.addEventListener('touched',slide_end,false);
//add/remove class
function hasClass(el, className) {
  if (el.classList)
    return el.classList.contains(className)
  else
    return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'))
}

function addClass(el, className) {
  if (el.classList)
    el.classList.add(className)
  else if (!hasClass(el, className)) el.className += " " + className
}

function removeClass(el, className) {
  if (el.classList)
    el.classList.remove(className)
  else if (hasClass(el, className)) {
    var reg = new RegExp('(\\s|^)' + className + '(\\s|$)')
    el.className=el.className.replace(reg, ' ')
  }
}

http://jaketrent.com/post/addremove-classes-raw-javascript/
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList