移动端轮播图左右滑动页面会抖是啥原因

Posted 2023-04-17

当目标位置和当前位置不够一个步长的时候，会出现多走了几像素的情况，当前位置比目标位置走远了所以就会回来，产生颤抖的情况。

function animate(ele,target)    
               clearInterval(ele.timer);    
               var speed = target>ele.offsetLeft?10:-10;    
               ele.timer = setInterval(function ()     
                   var val = target - ele.offsetLeft;    
                   ele.style.left = ele.offsetLeft + speed + "px";    
                   //判断够不够一个步长
                   if(Math.abs(val)<Math.abs(speed))    
                       ele.style.left = target + "px";    
                       clearInterval(ele.timer);    
                       
               ,10)    
           

判断一下当目标位置和当前位置够不够一个步长，如果不够的话让目标位置和当前位置相等，防止多走情况的出现。

参考技术A

主要就一句话 event.preventDefault(); 阻止浏览器默认行为
类似这样 
document.querySelector("#container").addEventListener("touchstart",function(event)
//code here
event.preventDefault();
,false)

移动端轮播图

 jdBannerJ();

unction jdBannerJ(){
var jdBannerImg = document.querySelector(‘.jd_bannerImg‘);
var jdBannerTagLis = document.querySelector(‘.jd_bannerTag‘).children;
var fChild = jdBannerImg.querySelector("li:first-of-type").cloneNode(true);
var lChild = jdBannerImg.querySelector("li:last-of-type").cloneNode(true);
var index = 1;
jdBannerImg.appendChild(fChild);
jdBannerImg.insertBefore(lChild, jdBannerImg.querySelector("li:first-of-type"));
var lis = jdBannerImg.querySelectorAll("li");
var count = lis.length;
var totalW = count * 100;
jdBannerImg.style.width = totalW + "%";
var offLeft = (100 / count)*index + "%";
jdBannerImg.style.transform = "translateX(-"+ offLeft +")";
for(var i = 0; i < count; i++){
lis[i].style.width = offLeft;
}
var jdTaglis = jdBannerTagLis.length;
// window.onresize = function(){
// var totalW = count * 100;
// var offLeft = (100 / count) + "%";
// jdBannerImg.style.width = totalW + "%";
// jdBannerImg.style.transform = "translateX(-"+ offLeft +")";
// for(var i = 0; i < count; i++){
// lis[i].style.width = offLeft;
// }
// }
// 自动轮播
var timeId;
bannerAction();
function bannerAction(){
clearInterval(timeId);
timeId = setInterval(function(){
index++;
jdBannerImg.style.transition = "all 0.5s ease-in-out";
offLeft = (100 / count)*index + "%";
jdBannerImg.style.transform = "translateX(-"+ offLeft +")";
if(index == count-1){
setTimeout(function(){
index = 1;
jdBannerImg.style.transition = "none";
offLeft = (100 / count)*index + "%";
jdBannerImg.style.transform = "translateX(-"+ offLeft +")";
}, 500);
}
}, 1500);
}
var startX,moveX,distanceX,indexX;
var isEnd = true;
jdBannerImg.addEventListener("touchstart",function(e){
startX = e.targetTouches[0].clientX;
indexX = index*(fChild.offsetWidth);
jdBannerImg.style.transition = "none";
clearInterval(timeId);
});
jdBannerImg.addEventListener("touchmove",function(e){
if(isEnd){
moveX = e.targetTouches[0].clientX;
distanceX = moveX - startX;
jdBannerImg.style.transform = "translateX("+ (distanceX - indexX) +"px)";
}
});
jdBannerImg.addEventListener("touchend",function(e){
isEnd = false;
if(Math.abs(distanceX) > 100){
if(distanceX < 0){
index ++;
} else {
index --;
}
} else if(Math.abs(distanceX) == 0){
index = index;
}
jdBannerImg.style.transition = "all 0.5s ease-in-out";
offLeft = (100 / count)*index + "%";
jdBannerImg.style.transform = "translateX(-"+ offLeft +")";
bannerAction();
starx = 0;
moveX = 0;
distanceX = 0;
console.log(index);
});
jdBannerImg.addEventListener("webkitTransitionEnd", function(){
if(index == count-1){
index = 1;
jdBannerImg.style.transition = "none";
offLeft = (100 / count)*index + "%";
jdBannerImg.style.transform = "translateX(-"+ offLeft +")";
} else if(index == 0){
index = count-2;
// jdBannerTagLis[index - 1].className = "current";
jdBannerImg.style.transition = "none";
offLeft = (100 / count)*index + "%";
jdBannerImg.style.transform = "translateX(-"+ offLeft +")";
}
// isEnd = true;
// clearInterval(timeId);
// bannerAction();
setTimeout(function(){
isEnd = true;
clearInterval(timeId);
bannerAction();
}, 100);
for(var i = 0; i < jdTaglis; i++){
jdBannerTagLis[i].className = "none";
}
jdBannerTagLis[index - 1].className = "current";
});
}