移动端滑动效果（图片需要自己加载）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>移动端滑动效果</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img {
width: 100%;
display: block;
}
</style>
</head>
<body>
<div id="page1">
<img src="images/bg1.jpg"/>
</div>
<div id="page2">
<img src="images/bg2.jpg"/>
</div>
<div id="page3">
<img src="images/bg3.jpg"/>
</div>
<div id="page4">
<img src="images/bg4.jpg"/>
</div>
<div id="page5">
<img src="images/bg5.jpg"/>
</div>
<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var startY = 0,
endY = 0,
n = 1,
flag = false;
document.addEventListener('touchstart', function(e) {
startY = e.targetTouches[0].pageY;
}, false);
document.addEventListener('touchmove', function(e) {
e.preventDefault();//阻止窗口滚动条滚动;
endY = e.targetTouches[0].pageY;
if (startY - endY > 100 || startY - endY < -100) {
flag = true;
};
}, false);
document.addEventListener('touchend', function(e) {
if (flag) {
flag = false;
if (startY - endY > 100) {//上滑动
if (n >= 5) {
n = 5;
return false;
};
switch(n) {
case 1: $('#page1').slideUp(300).next().show();
break;
case 2: $('#page2').slideUp(300).next().show();
break;
case 3: $('#page3').slideUp(300).next().show();
break;
case 4: $('#page4').slideUp(300).next().show();
break;
};
n ++;
}else if (startY - endY < -100) {//下滑动
if (n <= 1) {
n = 1;
return false;
};
switch (n){
case 5: $('#page4').slideDown(300,function() {
$('#page5').hide();
});
break;
case 4: $('#page3').slideDown(300,function() {
$('#page4').hide();
});
break;
case 3: $('#page2').slideDown(300,function() {
$('#page3').hide();
});
break;
case 2: $('#page1').slideDown(300,function() {
$('#page2').hide();
});
break;
}
n --;
};
} else{
return false;
};
}, false);
</script>
</body>
</html>
