html
<p class="box" id="box">
<ul id="ul">
<li class="ad1"></li>
<li class="ad2"></li>
<li class="ad3"></li>
<li class="ad4"></li>
</ul>
</p>
css
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.box {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.box ul {
position: absolute;
left: 0;
top: 0;
width: 30000px;
height: 100%;
-webkit-transition: transform .5s ease;
-moz-transition: transform .5s ease;
-ms-transition: transform .5s ease;
-o-transition: transform .5s ease;
transition: transform .5s ease;
}
.box li {
float: left;
width: 100vw;
height: 300px;
}
.ad1{
background: red;
}
.ad2{
background: green;
}
.ad3{
background: grey;
}
.ad4{
background: darkgoldenrod;
}
.ad5{
background:darkseagreen;
}
js
var ul=document.getElementById('ul');
var touchx=0;
var index=0;
var lilen=ul.getElementsByTagName('li').length;
var liwidth=document.documentElement.clientWidth;
ul.addEventListener('touchstart', function (e) {
e.preventDefault();
touchx= e.touches[0].clientX;
console.log(touchx);
},false);
ul.addEventListener('touchmove', function (e) {
var offsetX= e.changedTouches[0].pageX;
if(offsetX>touchx){
ul.style.transform='translate3d('+(offsetX-touchx)+'px,0,0)';
}else if(offsetX<touchx){
console.log(1)
ul.style.transform='translate3d('+-(touchx-offsetX)+'px,0,0)';
}
},false);
ul.addEventListener('touchend', function (e) {
var endtouch= e.changedTouches[0].pageX;
if(endtouch+20<touchx){
if(index >= lilen-1){
ul.style.transform='translate3d('+-(index*liwidth)+'px,0,0)';
}else{
index++;
ul.style.transform='translate3d('+-(index*liwidth)+'px,0,0)';
}
}else if(endtouch-20>touchx){
if(index <= 0){
ul.style.transform='translate3d(0,0,0)';
}else{
index--;
ul.style.transform='translate3d('+-(index*liwidth)+'px,0,0)';
}
}else{
ul.style.transform='translate3d('+-(index*liwidth)+'px,0,0)';
}
},false);
我写了一段手机端幻灯的代码。这里为什么e.touches[0].pageX.都是在手机第一屏幕内，还有这段代码该如何改进才能生效呢？想了很久了，请大神指教一下。
ringa_lee2017-04-10 16:10:33
感觉你写的逻辑太乱了，建议你最好用思维导图或者其他更加适合你的方式理清一下思路。这里有几点建议：
最好统一使用changedtouches来计算，不要使用touches和targetTouches
在绑定事件时劲量避免使用匿名函数，因为无法解绑
最后就是理清逻辑和变量
这是我写的demo，比较简单，还有很多应该完善的问题，比如添加定时切换的功能。
定时器在初始化时添加，touchstart时关闭，touchend时重新打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>test touch</title>
<style>
body { margin: 0; }
.box { width: 100%; overflow: hidden; }
ul,li { margin: 0; padding: 0; list-style: none; }
ul { width: 500%; overflow: hidden; transition: .5s; }
li { width: 20%; float: left; }
li { font-size: 40px; color: #fff; text-align: center; line-height: 150px; }
li:nth-of-type(1) { background: orange; }
li:nth-of-type(2) { background: red; }
li:nth-of-type(3) { background: pink; }
li:nth-of-type(4) { background: green; }
li:nth-of-type(5) { background: #333; }
</style>
</head>
<body>
<p class="box">
<ul id="test">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</p>
</body>
<script>
window.onload = function() {
var oUl = document.getElementById('test');
var aLi = oUl.getElementsByTagName('li');
var sX = 0; // 手指初始x坐标
var sLeft = 0; // 初始位移
var index = 0;
var curLeft = 0; // 当前位移
var disX = 0; // 滑动差值
oUl.addEventListener('touchstart', touchstart, false);
function touchstart(e) {
e.preventDefault();
sX = e.changedTouches[0].pageX;
// 计算初始位移
sLeft = oUl.style.transform ? -parseInt(/\d+/.exec(oUl.style.transform)[0]) : 0;
oUl.style.transition = 'none';
document.addEventListener('touchmove', touchmove, false);
document.addEventListener('touchend', touchend, false);
}
function touchmove(e) {
disX = e.changedTouches[0].pageX - sX;
curLeft = sLeft + disX;
oUl.style.transform = 'translateX(' + curLeft + 'px)';
}
function touchend(e) {
if (disX > 100) {
if (index != 0) {
index -= 1;
}
}
if (disX < -100) {
if (index != aLi.length - 1) {
index += 1;
};
};
oUl.style.transition = '.5s';
oUl.style.transform = 'translateX(' + -index*aLi[0].offsetWidth + 'px)';
}
}
</script>
</html>