移動端輪播圖切換【詳細解析】

輪播圖若是運用到移動端那麼，須要加入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。