首页 > 代码库 > 移动端上滑下滑换图片

移动端上滑下滑换图片

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no">
<style>
*{
margin: 0;
padding: 0;
list-style: none;

}
div img{
  width: 6.4rem;
  height: 10.49rem;
  display: block;
  margin-bottom: 0.5rem;

}
</style>
</head>
<body>
<div id="page1">
<img src="http://www.mamicode.com/img/06.jpg" >
</div>
<div id="page2" style="display: none;">
<img src="http://www.mamicode.com/img/07.jpg" >
</div>
<div id="page3" style="display: none;">
<img src="http://www.mamicode.com/img/4.jpg" >
</div>
<div id="page4" style="display: none;">
<img src="http://www.mamicode.com/img/6.jpg" >
</div>
<div id="page5" style="display: none;">
<img src="http://www.mamicode.com/img/7.jpg" >
</div>
<script src="http://www.mamicode.com/jquery-1.8.3.min.js"></script>
<script>
var startY=0,endy=0,flag=false,n=1;
document.addEventListener(‘touchstart‘,function(e){
  startY=e.targetTouches[0].pageY;
  console.log(e);
},false);
document.addEventListener(‘touchmove‘,function(e){
  endy=e.targetTouches[0].pageY;
  if (startY-endy>100||startY-endy<-100) {
    flag=true;
  }

},false);
document.addEventListener(‘touchend‘,function(e){
  if (flag) {
    if (startY-endy>100) {
      flag=false;
      if (n>=5) {
        n=5;
        return;
      };
    switch(n){
      case 1:
        $(‘#page1‘).slideUp(400).next().show();
        break;
      case 2:
        $(‘#page2‘).slideUp(400).next().show();
        break;
      case 3:
        $(‘#page3‘).slideUp(400).next().show();
        break;
      case 4:
        $(‘#page4‘).slideUp(400).next().show();
        break;
      case 5:
        $(‘#page5‘).slideUp(400).next().show();
        break;
      }
    n++;
    };
  if(startY-endy<-100){
    flag=false;
    if (n<=1) {
      n=1;
    };
    switch(n){
      case 5:
        $(‘#page4‘).slideDown(400,function(){
          $(‘#page5‘).hide();
        });
        break;
      case 4:
        $(‘#page3‘).slideDown(400,function(){
          $(‘#page4‘).hide();
        });
        break;
      case 3:
        $(‘#page2‘).slideDown(400,function(){
          $(‘#page3‘).hide();
        });
        break;
      case 2:
        $(‘#page1‘).slideDown(400,function(){
          $(‘#page2‘).hide();
        });
        break;
     }
     n--;
    }
  }
},false);
function fontresize(){
  var Html=document.getElementsByTagName(‘html‘)[0];
  var winw=document.documentElement.clientWidth;
  var scale=winw/640;
  Html.style.fontSize=100*scale+‘px‘;

}
fontresize();
window.resize=function(){
  fontresize();
}
</script>
</body>
</html>

移动端上滑下滑换图片