html5左右滑動頁面效果實現

The Demo of h5 slider achiev by Myself

主要思路：

　　設置一個容器container，然后里面有幾個page，獲取到屏幕的寬度並將其賦值給page，然后container設置寬度為page.length*width;

　　這時所有的page將會一字排開，將body設置overflow:hidden; width:100%;這樣的就只能顯示一個page；

　　再container上設置transform:translateX(),這是用來進行偏移就可以看不同的page；

　　移動端需要使用touch事件來觸發函數，實現效果：

　　touchstart中：

　　　　獲取到手指觸摸時的X坐標，startX = event.pageX;

　　　　獲取到當前位置的偏移量endX，初始化為0；

　　touchmove:

　　　　在手指移動過程中，改函數會一直被觸發；

　　　　通過pageX獲得實時坐標位置moveX = event.pageX ，通過和start比較可以知道手指是向哪邊滑動了；

　　　　滑動有以下限制：

　　　　　　第一個page時，不能在往左邊滑動；

　　　　　　最后一個page時，不能向右滑動；

　　　　最后通過設置translateX()使盒子隨着手指進行滑動：container.style.webkitTransform = "translateX(" + ( endX + moveX ) + "px)";

　　touchend:

　　　　判斷滑動的方向：

　　　　　　向左：相當於整個container容器往右邊移動一個page的寬度:container.style.webkitTransform = "translateX(" + ( endX + page.width ) + "px)";

　　　　　　向右：整個container往左移動:container.style.webkitTransform = "translateX(" + ( endX - page.width ) + "px)";

　　事件的綁定：

　　　　container.addEventListener("touchstart", XX(函數名), false):

　　　　container.addEventListener("touchstart", XX(函數名), false):

　　　　container.addEventListener("touchstart", XX(函數名), false);