h5 touch事件做轮播的问题

html5 xue8 347天前 43次浏览



原生js写的移动端轮播,用到了touch事件,在PC本地apache里运行可以正常滑动,但是连手机测试就完全不行了,很卡的样子,不能正常滑动,安卓手机 这是为啥
<!DOCTYPE html>
<html lang="en">
<head>


<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
(function(){
var html = document.documentElement;
var hWidth = html.getBoundingClientRect().width;
html.style.fontSize = hWidth/15 + "px";
})()
</script>
<style>
html,body{
margin: 0;
width: 100%;
-webkit-overflow-scrolling: touch;
}
.wrap{
height: 4.68rem;
position: relative;
overflow: hidden;
}
.ul{
padding: 0;
margin: 0;
position: absolute;
top:0;
left:0;
list-style: none;
}
.ul li{
float: left;
width:15rem;
}
.ul img{
width:15rem;
display: block;
}
nav{
width:15rem;
height: 10px;
position: absolute;
bottom:5px;
z-index: 1;
text-align:center;
}
nav a{
width:15px;
height: 15px;
display: inline-block;
background: red;
border-radius:50%;
vertical-align:top;
}
nav a.active{
background:#fff;
}
</style>

</head>
<body>


<section class="wrap">
<ul class="ul">
<li>
<img src="img/img.jpg" alt="" />
</li>
<li>
<img src="img/img2.jpg" alt="" />
</li>
<li>
<img src="img/img3.jpg" alt="" />
</li>
<li>
<img src="img/img4.jpg" alt="" />
</li>
</ul>
<nav>
<a href="javascript:;" class="active"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</nav>
</section>
<script>
var oWrap = document.querySelector(\'.wrap\'),
oUl = document.querySelector(\'.ul\'),
oA = document.querySelectorAll(\'a\'),
disX = 0, // 手指按下时的x轴坐标
ulLeft = 0, // 手指按下时ul的left值
w = oWrap.clientWidth,// 当前可视区宽度 375
n = 0,// 起始白点
len = 0;
oUl.innerHTML += oUl.innerHTML;
len = oUl.children.length;
oUl.style.width = w * len + \'px\'
oUl.ontouchstart = function(evt) {
this.style.transition = \'none\' // 按下时清除过度效果,防止过度影响touchmove
var e = evt.changedTouches[0]
disX = e.pageX;
// 按下时,获取当前点击的是第几张图片,如果是第一张就快速拉到第五张的位置
var ratio = Math.round(this.offsetLeft / w)
if(ratio == 0) {
ratio = oA.length;
this.style.left = -ratio * w + \'px\'
}
if(-ratio == len - 1) {
ratio = oA.length - 1;
this.style.left = -ratio * w + \'px\'
}
ulLeft = this.offsetLeft;
}
oUl.ontouchmove = function(evt) {
var e = evt.changedTouches[0]
this.style.left = (e.pageX - disX) + ulLeft + \'px\'
}
oUl.ontouchend = function(evt) {
var ratio = Math.round(this.offsetLeft / w)
this.style.transition = \'.5s\'
this.style.left = ratio * w + \'px\'

oA[n].className = \'\';
oA[-ratio % oA.length].className = \'active\';
n = -ratio % oA.length;
}
</script>

</body>
</html>





回答:
[]

0条回复
撰写答案