移动端轮播图切换【详细解析】

轮播图如果运用到移动端那么，需要加入meta标签,

meta name="viewport" content="width=device-width,height=device-height“

 

 

加上meta占满屏幕宽和高，然后考虑自适应宽，因移动端宽高大同小异，我们以iphone6，宽度320px为例，html根元素设置为20px,

样式只要给 #wrap添加样式16rem即可铺满宽度。js实现自适应宽度,resize当屏幕宽高发生变化根元素字体也跟着变化。

 

移动端需要到事件绑定完成对Dom操作，因此给window添加DOMContentLoaded绑定事件，获取ul,对ul按下手指绑定touchstart事件，获取事件当前x坐标------ev.targetTouches[0].pageX。

添加touchmove移动事件赋值x，提高移动端性能我们js最好不对css宽高坐标进行操作,所以使用了css3里面transform，3d效果。WebkitTransform。

 

转载于:https://www.cnblogs.com/chw8/p/7241941.html