How to use H5 to implement an example of a touch -screen rotor

At the beginning of the front end, share the implementation process of the touch screen carcass on the mobile phone. The general functions are as follows:

1. Support cycle sliding

2. The width can be set arbitrarily, no need to width with the screen

3. Page can roll vertically

4. You can set the switching of recovery monitoring elements

5. Pure JS, do not use any third party library

1. Assume that the width of the sub -element .Item is 375px, using absolute positioning to place all sub -elements in the parent element

2. Set the width of the parent element .carousel to 375px, which is the same as the sub -element .Item width

3. Add touch events to the parent element .carousel: TouchStart, TouchMove, Touchend

4. When you press your finger, save the initial position (clientx)

5. When sliding your fingers, judge the direction of sliding by sliding distance:

① Slide the finger to the left, and move the elements on the right side of the current element and the current element at the same time

② Swipe your fingers to the right, and move the elements on the left side of the current and current elements at the same time

6. When your fingers are lifted, determine whether to switch to the next page by sliding distance

① The movement distance does not exceed 50%of the width of the sub -element, and roll back the current page to the initial position without switching the current element.

② The moving distance exceeds 50%of the width of the child element, and the current element is switched to the next element.

③ Set the transform property of the current element to Translate3D (0px, 0px, 0px) and

④ Set the transform attribute of the next child element to Translate3D (375px, 0px, 0px)

⑤ Set the transform attribute of the previous child element to Translate3D (-375px, 0px, 0px), and the Z-Index attribute +1

⑥ Set the z-index property of all other sub-elements to the default value

7. The first element of the first child element is the last element, and the next element of the last element is the first element, which is implemented by the circular linked list.

When moving, set the transform property of the child element .Item, not the parent element .carousel

HTML & CSS

 // html <div class = carousel onTouchStart => <div class = background: #3B76C0> </h3> </div> </div> <Div class = itemle = Backgr OUND: #58C03B;> <h3> item-2 </h3> </div> <div class = item style = background: #c03b25;> <h3> item-3 </h3> </div> <div class = background: #e0a718;> <h3> item-4 </h3> </div> <div class = item style = background: #c03eac;> <h3> item-5 </h3> </div> </div>

 //css.carousel {Height: 50%; Position: related; overflow: hidden;}. Item {position: absolute; left: 0; width: 100%; height: 100%; 100%; }

JS

Set the initial state

First realize a two -way linked list to maintain the elements in the rotation component.

 Function node (data) {this.data = data; this.prev = null; this.next = null; this.index = -1;} // The two -way cycle list () {VAR_NODES = []; his. Head = null; this.last = null; if (typeof this.append! == Function) {linklist.prototype.append = function (node) {if (this.head == null) is.head = node; this .last = this.head;} ​​else {this.head.prev = node; this.last.next = node; node.prev = this.last; node.next = this.Head; this.last = node ;} Node .index = _nodes.length; // Be sure to set node.index_nodes.push (node);}}}

With the linked list, create a linked example, add the sub -element into the linked list, and set some initial states

 var _Container = Document.queryselector (. + Containerclass); VAR _ITEMS = DOCUMENT.QUERECTORLL (. + ItemClass); VAR List = Looplist (): New Sing lelist (); for (var I = 0; i <_items. length; i ++) {list.append (new node (_items [i]));} var _prev = null; // Save the element display before, save; A element var _normalzindex = _Current.data.style.zindex; // The zar _activezindex = _normalzindex + 1; // The zar _itemwidth = _Cur rent.data.OffsetWidth; // PositiveItems (); // Initialized element location Zindexitems (_Current, _Activezindex); // adds the current element and its left and right elements to add 1

When you press your finger, save the initial position

 _Container.adDeventListener (TouchStart, Function (E) {// E.PreventDefault (); // The annotation of this line of code will prevent the page from rolling vertically in the element. Then, then clientx; // Save the position of the finger strict = touch.clienty; = false; TransitionItems (_Prev, False); // Cancel the transition transitionItems (_Current, FALSE) of the previous element; // Cancel the transition of the current element}, FALSE);

Slide your fingers on the screen, and move your fingers on the page

 _Container.adDeventListener (Touchmove, Function (E) {// E.PreventDefault (); // The annotation of this line code will prevent the page in the element from rolling vertically. uch .clientx -startx; // Calculate the distance between the finger sliding in the x direction var deltay = touch.clienty -starty; // Calculate the distance between the finger sliding in the Y direction // If the shift in the X direction is greater than the direction of the Y, it is considered to be left and right. Sliding if (math.abs (deltax)> math.abs (deltay) {translate = deltax> _itemwidth? _Itemwidth: deltax; translate = deltax <-_itemwidth: Delta X; // Move the current elements and its left and right elements at the same time moveitems (translate); ismove = true;}}, false);

When your finger leaves the screen, the calculation will eventually stay on which page

 _Container.addeventListener (Touchend, Function (E) {// E.PreventDefault (); // Cancellation of the code of this line will prevent the page vertical scrolling in the element // Calculate the finger The time to stay on the screen var deltat = new date (). Gettime () -STARTT; if (ismove) {// Towards the left and right sliding // If the staying time is less than 300ms, it is considered to slide quickly, no matter how much sliding distance is the distance, how much is the distance between the sliding distance. , All stay to the next page if (deltat <300) {translate = translate <0? -_Itemwidth: _itemwidth;} Else {// If the sliding distance is less than 50%of the screen, return to the previous page if (math.abs (Translate) /_itemwidth <0.5) {isrollback = true;} else {// If the sliding distance is 50%greater than the screen, slide to the next page translate = translate <0? -_itemwidth; } Moveto (Translate, Isrollback);}}, false);

In order to facilitate use, I encapsulated the entire implementation process into a library and added the prev (), next () method, which is very simple:

 <script src = lib/carousel.js> </script> Createcarousel (carousel, it, true) .bindTouchevent () .Setitemchangedhandler (onPageChangeded); The class name of the container // parameter item is the class of the child element Name // Whether the third parameter settings need to be played by cycle, True is played by cycle

The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.