PC端上实现图片轮播效果非常简单，只要通过使用click事件就可以非常简单的实现效果，但是在移动端上，就要通过核心的touch事件来实现。话不多说，现在我们就开始移动端轮播效果的实现。
首先就是原生JS实现效果的原理，其原理和PC端的原理一样，主要是控制包容图片的盒子的left的大小实现向左滑动还是向右滑动。以一张图来概括，如下：
1.png
在做效果之前，向将其静态效果实现，再用JS实现其动态效果。
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 li img{display:block;width:100%;height:100%;}```
var aLi = document.querySelectorAll(".box li");
var box = document.querySelector('.box');
var wrap = document.querySelector('.wrap');
var aLiWidth = box.offsetWidth;
wrap.style.height = aLi[0].offsetHeight + 'px';
// 设置盒子的宽度
box.style.width = aLi.length100 + '%';
for(var i=0;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 = -currNumwrap.offsetWidth + 'px';
})
代码码到这里的时候，效果除了定时器和下方锚点并没有实现，其余就基本上OK了。但是在实际上手的时候，发现在老旧机型上会存在性能不足产生卡断的问题，后来在查阅资料时才发现，left/margin/top值改变时会影响元素在文档中的布局，当对布局进行动画时，该元素的改变会引起其他元素在文档中的位置，进而使浏览器对相关的元素进行重绘，造成极大的性能开销。所以在移动端轮播中放弃了使用left的方法，而选用了transform。至于transform如何实现，我将在下篇博文中解析。
如果觉得《移动端实现文字轮播_使用原生JS实现移动端图片轮播效果(一)》对你有帮助，请点赞、收藏，并留下你的观点哦！
