Shulou(Shulou.com)05/31 Report--

This article mainly introduces how to use html5 to achieve the touch screen version of the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this article on how to use html5 to achieve the touch screen version of the rotational seeder article will have a harvest, let's take a look.

The general functions are as follows:

1. Support cyclic sliding

2. The width can be set arbitrarily and does not need to be as wide as the screen.

3. The page can be scrolled vertically.

4. The switch of callback listening elements can be set.

5. Pure js without any third-party libraries

Principle

1. Assume that the width of the child element .item is 375px, and use absolute positioning to place all child elements in the parent element.

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

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

4. Save the initial position (clientX) when the finger is pressed.

5. When the finger slides, judge the sliding direction by the sliding distance:

If you slide your ① finger to the left, you will move both the current element and the element to the right of the current element.

If you slide your ② finger to the right, you will move both the current element and the element to the left of the current element.

6. when the finger is raised, determine whether to switch to the next page by sliding distance.

① moves no more than 50% of the width of the child element, rolls back the current page to the original position, and does not switch the current element.

② moves more than 50% of the width of the child element, switching the current element to the next element.

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

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

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

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

7. The last element of the first child element is the last element, and the next element of the last element is the first element. This step is realized through a circular linked list.

The transform attribute of the child element .item is set when you move, not the parent element .carousel

Implementation steps

Html&css

/ / html item-1 item-2 item-3 item-4 item-5 / / css.carousel {height: 50%; position: relative; overflow: hidden;}. Item {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}

Js

Set the initial state

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;} / / two-way circular 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.index _ nodes.push (node) before push;}

Once you have the linked list, create a linked list instance, add child 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; //保存之前显示的元素var _current = list.head; //保存当前显示的元素，默认为第一个元素var _normalZIndex = _current.data.style.zIndex; //未显示元素的z-index值var _activeZIndex = _normalZIndex + 1; //当前显示元素的z-index值var _itemWidth = _current.data.offsetWidth; //子元素宽度positionItems(); //初始化元素位置zindexItems(_current, _activeZIndex); //将当前元素及其左右元素的z-index加1 绑定触摸事件 touchstart事件 手指按下时，保存初始位置 _container.addEventListener("touchstart", function(e) { // e.preventDefault();//取消此行代码的注释会在该元素内阻止页面纵向滚动 var touch = e.touches[0]; startX = touch.clientX; //保存手指按下时的位置 startY = touch.clientY; _container.style.webkitTransition = ""; //取消动画效果 startT = new Date().getTime(); //记录手指按下的开始时间 isMove = false; transitionItems(_prev, false); //取消之前元素的过渡 transitionItems(_current, false); //取消当前元素的过渡}, false); touchmove事件 手指在屏幕上滑动，页面跟随手指移动 _container.addEventListener("touchmove", function(e) { // e.preventDefault();//取消此行代码的注释会在该元素内阻止页面纵向滚动 var touch = e.touches[0]; var deltaX = touch.clientX - startX; //计算手指在X方向滑动的距离 var deltaY = touch.clientY - startY; //计算手指在Y方向滑动的距离 //如果X方向上的位移大于Y方向，则认为是左右滑动 if (Math.abs(deltaX) >

Math.abs (deltaY)) {translate = deltaX > _ itemWidth? _ itemWidth: deltaX; translate = deltaX <-_ itemWidth?-_ itemWidth: deltaX; / / move both the current element and its left and right elements moveItems (translate); isMove = true;}}, false)

Touchend event

When the finger leaves the screen, calculate which page you finally need to stay on

_ container.addEventListener ("touchend", function (e) {/ / e.preventDefault (); / / canceling the comment on this line of code prevents the page from scrolling vertically within this element / / whether it scrolls var isRollback = false; / / calculates the time the finger stays on the screen var deltaT = new Date () .getTime ()-startT If (isMove) {/ / left and right sliding occurs / / if the residence time is less than 300ms, it is considered to be fast sliding, no matter what the sliding distance is, 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 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 whole implementation into a library and added the prev (), next () methods, which are very easy to use:

CreateCarousel ("carousel", "item", true) .bindTouchEvent () .setItemChangedHandler (onPageChanged); / / Parameter "carousel" is the container's class name / / parameter "item" is the child element's class name / / whether the third parameter setting needs to be played in a loop. This is the end of the article on "how to use html5 to implement a touch screen version of the wheel broadcaster". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to use html5 to achieve the touch-screen version of the rotational broadcaster". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.