How to implement finger sliding carousel on mobile terminal in js
Below I will share with you an example of js native implementation of the finger sliding carousel effect on the mobile terminal. It has a good reference value and I hope it will be helpful to everyone.
is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
</head>
<style>
html{height:100%;}
body{width: 100%;height:100%;margin:0;overflow: hidden;}
.wrap{position: relative;overflow: hidden;}
.box{position: absolute;list-style: none;left:0;top:0;padding:0;margin:0;}
.box li{float:left;}
.box{
position: relative;
height: 2000px;
width: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: red;
}
.box1{
height: 2000px;
}
.box2{
background: yellow;
}
.box3{
background: yellowgreen;
}
.box4{
background: orange;
}
.box5{
background: cyan;
}
</style>
<body>
<p class="wrap">
<ul class="box">
<li><p class="box1 box2">11111</p></li>
<li><p class="box1 box3">2222</p></li>
<li><p class="box1 box4">3333</p></li>
<li><p class="box1 box5">4444</p></li>
</ul>
</p>
<script>
var aLi = document.querySelectorAll(".box li");
var box = document.querySelector('.box');
var wrap = document.querySelector('.wrap');
var aLiWidth = box.offsetWidth;
console.log('aLiWidth: ' + aLiWidth)
wrap.style.height = aLi[0].offsetHeight + 'px';
// 设置盒子的宽度
box.style.width = aLi.length*100 + '%';
for(var i=0;i<aLi.length;i++){
aLi[i].style.width = 1/aLi.length * 100 + '%';
};
// 初始化手指坐标点
var startPoint = 0;
var startEle = 0;
//手指按下
wrap.addEventListener("touchstart",function(e){
startPoint = e.changedTouches[0].pageX;
startEle = box.offsetLeft;
});
//手指滑动
wrap.addEventListener("touchmove",function(e){
var currPoint = e.changedTouches[0].pageX;
var disX = currPoint - startPoint;
var left = startEle + disX;
box.style.left = left + 'px';
});
//当手指抬起的时候，判断图片滚动离左右的距离，当
wrap.addEventListener("touchend",function(e){
var left = box.offsetLeft;
// 判断正在滚动的图片距离左右图片的远近，以及是否为最后一张或者第一张
var currNum = Math.round(-left/aLiWidth);
currNum = currNum>=(aLi.length-1) ? aLi.length-1 : currNum;
currNum = currNum<=0 ? 0 : currNum;
box.style.left = -currNum*wrap.offsetWidth + 'px';
})
</script>
</body>
</html>The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
How to implement high-performance loading sequence in javascript
##How to implement global registration in axios
How to implement login verification jump using Vue Flask (detailed tutorial)
About usage of connect decorator in react-redux
The above is the detailed content of How to implement finger sliding carousel on mobile terminal in js. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Solve the problem of multi-touch points on Vue mobile terminal
Jun 30, 2023 pm 01:06 PM
In mobile development, we often encounter the problem of multi-finger touch. When users use multiple fingers to swipe or zoom the screen on a mobile device, how to accurately recognize and respond to these gestures is an important development challenge. In Vue development, we can take some measures to solve the problem of multi-finger touch on the mobile terminal. 1. Use the vue-touch plug-in vue-touch is a gesture plug-in for Vue, which can easily handle multi-finger touch events on the mobile side. We can install vue-to via npm
Use WeChat applet to achieve carousel switching effect
Nov 21, 2023 pm 05:59 PM
Use the WeChat applet to achieve the carousel switching effect. The WeChat applet is a lightweight application that is simple and efficient to develop and use. In WeChat mini programs, it is a common requirement to achieve carousel switching effects. This article will introduce how to use the WeChat applet to achieve the carousel switching effect, and give specific code examples. First, add a carousel component to the page file of the WeChat applet. For example, you can use the <swiper> tag to achieve the switching effect of the carousel. In this component, you can pass b
How to use mobile gesture operations in Vue projects
Oct 08, 2023 pm 07:33 PM
How to use mobile gesture operations in Vue projects With the popularity of mobile devices, more and more applications need to provide a more friendly interactive experience on the mobile terminal. Gesture operation is one of the common interaction methods on mobile devices, which allows users to complete various operations by touching the screen, such as sliding, zooming, etc. In the Vue project, we can implement mobile gesture operations through third-party libraries. The following will introduce how to use gesture operations in the Vue project and provide specific code examples. First, we need to introduce a special
How to create a responsive carousel layout using HTML and CSS
Oct 20, 2023 pm 04:24 PM
How to create a responsive carousel layout using HTML and CSS Carousels are a common element in modern web design. It can attract the user's attention, display multiple contents or images, and switch automatically. In this article, we will introduce how to create a responsive carousel layout using HTML and CSS. First, we need to create a basic HTML structure and add the required CSS styles. The following is a simple HTML structure: <!DOCTYPEhtml&g
How to implement the automatic playback function of carousel images in JavaScript?
Oct 20, 2023 am 08:03 AM
How does JavaScript implement the automatic play function of carousel images? With the rapid development of the Internet, carousel images have become one of the commonly used elements in web design. Carousel pictures can not only display multiple pictures to users, but also improve user experience through the automatic playback function. JavaScript is one of the important tools for realizing the automatic playback function of carousels. This article will introduce how JavaScript implements the automatic playback function of carousel images, and provide corresponding code examples. First, we need to prepare some basic
Tips and best practices for implementing revolving lanterns and carousels in Vue
Jun 25, 2023 pm 12:17 PM
With the popularity of web applications, carousels and revolving doors have become indispensable components in front-end pages. Vue is a popular JavaScript framework that provides many out-of-the-box components, including implementing carousels and revolving doors. This article will introduce the techniques and best practices for implementing revolving lanterns and carousels in Vue. We’ll discuss how to use the built-in components in Vue.js, how to write custom components, and how to combine animation and CSS to make your carousels and carousels more attractive
How to solve the double-click amplification problem on mobile terminals in Vue development
Jun 29, 2023 am 11:06 AM
With the popularity of mobile devices, using Vue for mobile development has become a common choice. However, we often face a problem during mobile development, which is double-clicking to zoom in. This article will focus on this problem and discuss how to solve the specific method of double-click amplification on the mobile terminal in Vue development. The double-click enlargement problem on mobile devices occurs mainly because the mobile device automatically enlarges the zoom ratio of the web page when double-clicking on the touch screen. For general web development, this kind of double-click to enlarge is usually beneficial because it can
How to implement mobile map positioning function using Python and Baidu Map API
Jul 29, 2023 pm 11:33 PM
Method of implementing mobile map positioning function using Python and Baidu Map API. With the development of mobile Internet, map positioning function has become more and more common in mobile applications. Python, as a popular programming language, can also implement mobile map positioning functions by using Baidu Map API. The following will introduce the steps to implement the map positioning function using Python and Baidu Map API, and provide corresponding code examples. Step 1: Apply for Baidu Map API Key Before starting, we first need to apply
