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如何实现，我将在下篇博文中解析。