JavaScript achieves the carousel effect on mobile terminals, and javascript achieves carousel

JavaScript achieves the carousel effect on mobile terminals, and javascript achieves carousel

This carousel code was not written by myself. It was accidentally seen on the home page of a Jane friend. Today I saw the event and decided to analyze the code line by line. First of all, what is different between the mobile end and the computer is that the mobile end can only act through touch and gesture, so we need to use new events related to touch operations in js. In fact, the principle of carousel is the same as before. We control the appearance of images by changing the position of elements, but we are not very familiar with the attributes used for tracking touch.

Next, I will briefly introduce some touch-related knowledge.

Touch event

• Touchstart: triggered when a finger is used to touch the screen.
• Touchmove: triggered continuously when the finger slides on the screen. You can use preventDefault () to prevent scrolling during this event.
• Touchend: triggered when the finger is removed from the screen.
• Touchcancel: triggered when the system stops tracking.
  

The above events will be bubbling and can be canceled.

Attribute

• Touches: an array of Touch objects for the currently tracked Touch operations
• TargetTouches: an array of Touch objects specific to the event target. (A simple point can be understood as the position where the fingers touch the screen)
• ChangeTouches indicates the array of touch objects that have changed since the last touch. (Finger exit position)
  

Each touch object includes the following attributes:

• ClientX: Touch the x coordinate of the target in the viewport.
• ClientY: Touch the y coordinate of the target in the viewport
• Identifier: Unique ID that identifies a touch
• PageX: Touch the x coordinate of the target in the page
• PageY: Touch the y coordinate of the target in the page
• ScreenX: Touch the x coordinate of the target in the page
• ScreenY: Touch the y coordinate of the target in the page
• Target: dom node target to be touched
  

The Code is as follows:

<! DOCTYPE html> 
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.