How to realize the sliding banner effect of Mobile end with Native javascript
This article mainly introduces the relevant knowledge of how native javascript implements mobile sliding banner effect. It is easy to understand and easy to operate, and has certain reference value. I believe you will gain something after reading this article on how to achieve mobile sliding banner effect with native javascript. Let's take a look at it.
The specific code is as follows
Document * {margin:0;padding:0;} .box {height:200px; width:100%; overflow: hidden;} .movebox {height:200px; width:9000px; padding:0; position:relative; left:0;} .movebox li {height:200px; float:left; list-style:none; font-size:30px; color:#fff } _ window.onload = function () {var moveX, / / finger sliding distance endX, / / X axis coordinate cout = 0 when fingers stop sliding, / / sliding counter moveDir; / / sliding direction var movebox = document.querySelector (".movebox"); / / sliding object var Li = movebox.querySelectorAll ("li"); / / sliding object item var width = parseInt (window.getComputedStyle (movebox [XSS]) .width) / / the width of the sliding object item movebox.style.width = (width*4) + "px"; / / sets the sliding box width for (var I = 0; I
< Li.length; i++){ Li[i].style.width = width + "px"; //设置滑动item的width，适应屏幕宽度 } //触摸开始 function boxTouchStart(e){ var touch = e.touches[0]; //获取触摸对象 startX = touch.pageX; //获取触摸坐标 endX = parseInt(movebox.style.webkitTransform.replace("translateX(", "")); //获取每次触摸时滑动对象X轴的偏移值 } function boxTouchMove(e){ var touch = e.touches[0]; moveX = touch.pageX - startX; //手指水平方向移动的距离 if(cout == 0 && moveX >0) {/ / return false;} if (cout = = 3 & & moveX < 0) at the beginning of the first slide to the left) {/ / at last continue to slide to the right, return false;} movebox.style.webkitTransform = "translateX (" + (endX + moveX) + "px)"; / / the sliding object slides with it when the finger slides} function boxTouchEnd (e) {moveDir = moveX < 0? True: false; / / sliding direction greater than 0 means sliding to the left, and less than 0 means sliding to the right / / finger sliding to the left if (moveDir) {if (cout)
