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

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)

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.