The Demo of h5 slider achiev by Myself
Main idea:
Set a container container, and then there are several pages in it, get the width of the screen and assign it to the page, and then set the width of the container to page.length*width;
At this time, all pages will be lined up, set the body to overflow:hidden; width:100%; in this way, only one page can be displayed;
Then set transform:translateX() on the container, which is used to offset to see different pages;
The mobile terminal needs to use the touch event to trigger the function to achieve the effect:
In touchstart:
Get the X coordinate when the finger touches, startX = event.pageX;
Get the offset endX of the current position, initialized to 0;
touchmove:
In the process of finger movement, the function will always be triggered;
Get the real-time coordinate position through pageX moveX = event.pageX , by comparing with start, you can know which side the finger is sliding to;
Swipe has the following limitations:
On the first page, you cannot swipe to the left;
On the last page, you cannot swipe right;
Finally, make the box slide with the finger by setting translateX(): container.style.webkitTransform = "translateX(" + ( endX + moveX ) + "px)";
touchend:
Determine the sliding direction:
Left: Equivalent to moving the entire container to the right by the width of a page: container.style.webkitTransform = "translateX(" + ( endX + page.width ) + "px)";
Right: move the entire container to the left: container.style.webkitTransform = "translateX(" + ( endX - page.width ) + "px)";
Event binding:
container.addEventListener("touchstart", XX(function name), false):
container.addEventListener("touchstart", XX(function name), false):
container.addEventListener("touchstart", XX(function name), false);