How to Use H5 to implement a live-screen carousel instance or an h5 instance

How to Use H5 to implement a live-screen carousel instance or an h5 instance

When you first enter the front-end, you can share the implementation process of the caster in the touch screen version on your mobile phone. The functions are as follows:

1. circular sliding is supported.

2. The width can be set at will, and it does not need to be equal to the screen width.

3. Page scrolling

4. You can set the switching of callback listening elements.

5. Pure js, without any third-party Libraries

Principle

1. Assume that the width of the child element. item is 375px, and all the child elements are placed in the parent element with absolute positioning.

2. Set the width of the parent element. carousel to 375px, which is the same as the width of the child element. item.

3. Add touch events for parent element. uplousel: touchstart, touchmove, and touchend

4. When the finger is pressed, save the initial position (clientX)

5. When the finger slides, the sliding distance is used to determine the sliding direction:

1. If your finger slides left, the current element and the element on the right of the current element are moved at the same time.

② Slide your finger to the right to move the current element and the element on the left of the current element at the same time.

6. When the finger is raised, the sliding distance is used to determine whether to switch to the next page.

① If the movement distance does not exceed 50% of the width of the child element, roll back the current page to the initial position without switching the current element.

② Move 50% away from the sub-element width and switch the current element to the next element.

③ Set the transform attribute of the current element to translate3d (0px, 0px, 0px), and add the z-index attribute to + 1.

④ Set the transform attribute of the next child element to translate3d (375px, 0px, 0px), and add the z-index attribute to + 1.

⑤ Set the transform attribute of the previous child element to translate3d (-375px, 0px, 0px), and add the z-index attribute to + 1.

⑥ Set the z-index attribute of all other child elements to the default value

7. The last element of the first sub-element is the last element, and the next element of the last element is the first element. This step is implemented through the circular linked list.

The transform attribute of the child element. item is set when moving, instead of the parent element. incluusel.

Steps

Html & css

//html<div class="carousel" ontouchstart="" >    <div class="item" style="background: #3b76c0" >        

//css.carousel{  height: 50%;  position: relative;  overflow: hidden;}.item {  position: absolute;  left: 0;  top: 0;  width: 100%;  height: 100%;}
Js
Set initial status
First, a two-way linked list is implemented to maintain the elements in the carousel component.
Function Node (data) {this. data = data; this. prev = null; this. next = null; this. index =-1;} // bidirectional loop list function LinkList () {var _ nodes = []; this. head = null; this. last = null; if (typeof this. append! = "Function") {LinkList. prototype. append = function (node) {if (this. head = null) {this. 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 before pushing. index _ nodes. push (node );}}}
With the linked list, create a linked list instance, add sub-elements to the linked list, and set some initial states.
Var _ container = document. querySelector ("." + containerClass); var _ items = document. querySelectorAll ("." + itemClass); var list = loop? New LinkList (): new SingleList (); for (var I = 0; I <_ items. length; I ++) {list. append (new Node (_ items [I]);} var _ prev = null; // Save the previously displayed element var _ current = list. head; // Save the currently displayed element. The default value is var _ normalZIndex = _ current. data. style. zIndex; // The z-index value of the element not displayed var _ activeZIndex = _ normalZIndex + 1; // The z-index value of the currently displayed element var _ itemWidth = _ current. data. offsetWidth; // sub-element width positionItems (); // initialize the element position zindexItems (_ current, _ activeZIndex); // Add 1 to the z-index of the current Element and Its left and right elements
Bind a touch event
Touchstart event
When the finger is pressed, save the initial position
_ Container. addEventListener ("touchstart", function (e) {// e. preventDefault (); // canceling the comments of this line of code will prevent the page from scrolling vertically in this element var touch = e. touches [0]; startX = touch. clientX; // Save the position startY = touch when the finger is pressed. clientY; _ container. style. webkitTransition = ""; // cancel the animation effect startT = new Date (). getTime (); // record the start time isMove = false; transitionItems (_ prev, false); // cancel the transition transitionItems (_ current, false) of the previous element ); // cancel the transition of the current element}, false );
Touchmove event
Slide your finger on the screen and move the page following your finger
_ Container. addEventListener ("touchmove", function (e) {// e. preventDefault (); // canceling the comments of this line of code will prevent the page from scrolling vertically in this element var touch = e. touches [0]; var deltaX = touch. clientX-startX; // calculates the distance from which the finger slides in the X direction. var deltaY = touch. clientY-startY; // calculates the sliding distance of the finger in the Y direction. // if the displacement in the X direction is greater than that in the Y direction, it is considered to be sliding left and right if (Math. abs (deltaX)> Math. abs (deltaY) {translate = deltaX> _ itemWidth? _ ItemWidth: deltaX; translate = deltaX <-_ itemWidth? -_ ItemWidth: deltaX; // simultaneously move the current Element and Its left and right elements moveItems (translate); isMove = true ;}}, false );
Touchend event
When the finger leaves the screen, calculate the page on which it will eventually stay
_ Container. addEventListener ("touchend", function (e) {// e. preventDefault (); // canceling the comments of this line of code will block the page from vertical scrolling in this element // whether var isRollback = false; // calculate the time for the finger to stay on the screen var deltaT = new Date (). getTime ()-startT; if (isMove) {// sliding between left and right occurs // if the stay time is less than 300 ms, it is considered as a Fast Slide, regardless of the sliding distance, all stay on the next page if (deltaT <300) {translate = translate <0? -_ ItemWidth: _ itemWidth;} else {// if the sliding distance is less than 50% of the screen, it is returned to the previous page if (Math. abs (translate)/_ itemWidth <0.5) {isRollback = true;} else {// If the sliding distance is greater than 50% of the screen, slide to the next page translate = translate <0? -_ ItemWidth: _ itemWidth ;}} moveTo (translate, isRollback) ;}}, false );
Carousel Library
For ease of use, I encapsulated the entire implementation process into a library and added the prev () and next () methods, which are very simple to use:
<Script src = "lib/carousel. js "> </script> CreateCarousel (" carousel "," item ", true ). bindTouchEvent (). setItemChangedHandler (onPageChanged); // The parameter "usel" is the class name of the container // The parameter "item" is the class name of the child element // The third parameter sets whether loop playback is required, true indicates loop playback.
The Library: http://xiazai.jb51.net/201701/yuanma/Carousel_jb51.rar
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.