移动端上滑下滑换图片
Posted 微笑
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端上滑下滑换图片相关的知识，希望对你有一定的参考价值。
<!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="img/06.jpg" >
</div>
<div id="page2" style="display: none;">
<img src="img/07.jpg" >
</div>
<div id="page3" style="display: none;">
<img src="img/4.jpg" >
</div>
<div id="page4" style="display: none;">
<img src="img/6.jpg" >
</div>
<div id="page5" style="display: none;">
<img src="img/7.jpg" >
</div>
<script src="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>
以上是关于移动端上滑下滑换图片的主要内容，如果未能解决你的问题，请参考以下文章