<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<meta name=
"viewport"
content=
"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
>
<title>Document</title>
</head>
<style>
html{height:100%;}
body{width: 100%;height:100%;margin:0;overflow: hidden;}
.wrap{position: relative;overflow: hidden;}
.box{position: absolute;list-style: none;left:0;top:0;padding:0;margin:0;}
.box li{float:left;}
.box{
position: relative;
height: 2000px;
width: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: red;
}
.box1{
height: 2000px;
}
.box2{
background: yellow;
}
.box3{
background: yellowgreen;
}
.box4{
background: orange;
}
.box5{
background: cyan;
}
</style>
<body>
<p
class
=
"wrap"
>
<ul
class
=
"box"
>
<li><p
class
=
"box1 box2"
>11111</p></li>
<li><p
class
=
"box1 box3"
>2222</p></li>
<li><p
class
=
"box1 box4"
>3333</p></li>
<li><p
class
=
"box1 box5"
>4444</p></li>
</ul>
</p>
<script>
var
aLi = document.querySelectorAll(
".box li"
);
var
box = document.querySelector(
'.box'
);
var
wrap = document.querySelector(
'.wrap'
);
var
aLiWidth = box.offsetWidth;
console.log(
'aLiWidth: '
+ aLiWidth)
wrap.style.height = aLi[0].offsetHeight +
'px'
;
box.style.width = aLi.length*100 +
'%'
;
for
(
var
i=0;i<aLi.length;i++){
aLi[i].style.width = 1/aLi.length * 100 + '%';
};
var
startPoint = 0;
var
startEle = 0;
wrap.addEventListener(
"touchstart"
,
function
(e){
startPoint = e.changedTouches[0].pageX;
startEle = box.offsetLeft;
});
wrap.addEventListener(
"touchmove"
,
function
(e){
var
currPoint = e.changedTouches[0].pageX;
var
disX = currPoint - startPoint;
var
left = startEle + disX;
box.style.left = left + 'px';
});
wrap.addEventListener(
"touchend"
,
function
(e){
var
left = box.offsetLeft;
var
currNum = Math.
round
(-left/aLiWidth);
currNum = currNum>=(aLi.length-1) ? aLi.length-1 : currNum;
currNum = currNum<=0 ? 0 : currNum;
box.style.left = -currNum*wrap.offsetWidth + 'px';
})
</script>
</body>
</html>