How to implement mobile touch carousel in js
Below I will share with you a sample code for implementing native js to implement touch carousel on the mobile terminal. It has a good reference value and I hope it will be helpful to everyone.
It is very simple to realize the image carousel effect on the PC side. You can achieve the effect very simply by using the click event, but on the mobile side, it must be achieved through the core touch event.
The following is the complete code for the finger sliding carousel on the mobile terminal.
<!DOCTYPE html>
<html>
<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">
<style>
*{margin:0;padding:0;}
li{list-style:none;}
.lb{width:320px;height:130px;position:relative;margin:20px auto;overflow: hidden;}
.lb .lb_img{width:2240px;height:130px;position:absolute;left:-320px;}
.lb .lb_img img{width:320px;height:130px;float:left;display:block;}
.lb ul{width:35px;height:4px;position:absolute;bottom:10px;left:50%;margin-left:-15px;}
.lb ul li{width:4px;height:4px;border-radius:2px;border:0.25px solid #fff;margin-left:2.5px;background:#666;float:left;cursor:pointer;}
.lb ul .active{background:#fff;}
.lb ul li:hover{background:#fff;}
</style>
</head>
<body>
<p class="lb">
<p class="lb_img">
<img src="img/4.jpg">
<img src="img/0.jpg">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
<img src="img/4.jpg">
<img src="img/0.jpg">
</p>
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</p>
<script>
var lb = document.querySelector(".lb");
var lb_img = document.querySelector(".lb .lb_img");
var img = document.querySelectorAll(".lb .lb_img img")
var lis = document.querySelectorAll(".lb ul li");
var i=2;
// 初始化手指坐标点
var startPoint = 0;
var startEle = 0;
//手指按下
lb.addEventListener("touchstart",function(e){
startPoint = e.changedTouches[0].pageX;
startEle = lb_img.offsetLeft;
clearInterval(Time)
});
//手指滑动
lb.addEventListener("touchmove",function(e){
var currPoint = e.changedTouches[0].pageX;
var disX = currPoint - startPoint;
var left = startEle + disX;
lb_img.style.left = left + "px";
});
//当手指抬起的时候，
lb.addEventListener("touchend",function(e){
var currPoint = e.changedTouches[0].pageX;
var disX = - (currPoint - startPoint);
var left = startEle + disX;
if(disX > 150){
i++;
for(var q=0;q<lis.length;q++){
lis[q].className = '';
}
if(i == 7){
i=2;
}
lis[i-2].className= "active" ;
lb_img.style.left = -320*(Math.round(disX/320)+i+1)+ 'px';
}else{
lb_img.style.left = -320*(i-1) + "px";
}
if(disX < -150){
i--;
for(var q=0;q<lis.length;q++){
lis[q].className = '';
}
if(i == 1){
i=6;
}
lis[i-2].className= "active" ;
lb_img.style.left = -320*(Math.round(-disX/320)+i-2) + 'px';
}else{
lb_img.style.left = -320*(i-1) + "px";
}
Time=setInterval(autoplay,2000);
})
//设置定时器
Time=setInterval(autoplay,2000);
function autoplay(){
i++;
for(var q=0;q<lis.length;q++){
lis[q].className = '';
}
if(i == 7){
i=2;
}
lis[i-2].className= "active" ;
for(var a=0; a<320;a++){
setTimeout(function(){
var left = lb_img.style.left ? lb_img.style.left : "-320px";
left = parseInt(left)-1;
if(left<-1920){
left=-321;
}
lb_img.style.left = left + "px";
},a);
}
}
</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 query weather forecast in Angular
How to display input content in Angular
How to implement the schedule function in Angular
How to implement file upload in nodejs express
In Vue How to implement a blog management platform in SpringBoot
How to solve the maximum call stack error in nodejs
About asynchronous components in Vue Example
The above is the detailed content of How to implement mobile touch carousel 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
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
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
1655
14
1414
52
1307
25
1253
29
1227
24
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
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
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
A complete guide to implementing mobile responsive layout in Vue (Vant)
Jun 09, 2023 pm 04:09 PM
A Complete Guide to Implementing Mobile Responsive Layout in Vue (Vant) Mobile responsive layout is a very important part of modern web development. With the popularity of mobile devices, how to quickly respond to the size and resolution of the user's mobile phone screen has become a One of the challenges front-end engineers have to face. The Vue framework comes with responsive layout features, and there are also many third-party libraries to help us implement responsive layout. Among them, Vant component library is a Vue mobile UI library because it is very powerful, easy to use and customized, and is fully compatible with mobile devices.
Native js implements append() method
Feb 18, 2024 pm 02:37 PM
To implement the append() method in native js, specific code examples are required. When writing JavaScript code, it is often necessary to add new content to specified elements in the web page. A common operation is to set the HTML content of the element through the innerHTML attribute. However, using the innerHTML attribute sometimes results in the loss of event listeners, styles, etc. inside the element. In order to better implement the function of adding content, we can implement an append() method ourselves. The append() method 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
Vue development: Optimizing the stuck problem of gesture scaling on the mobile terminal
Jun 30, 2023 pm 04:33 PM
How to solve the stuck problem of mobile gesture zooming pages in Vue development. In recent years, the popularity of mobile applications has made gesture operations an important way of user interaction. In Vue development, implementing the gesture zoom function on the mobile terminal often encounters the problem of page lag. This article will explore how to solve this problem and provide some optimization strategies. Understand the principle of gesture scaling. Before solving the problem, we first need to understand the principle of gesture scaling. Gesture zooming is implemented by listening to touch events. When the user slides the screen with two fingers, the page will follow the sliding movement of the fingers.
How to handle mobile and responsive design in PHP forms
Aug 10, 2023 am 11:51 AM
How to deal with mobile and responsive design in PHP forms. With the popularity and frequency of mobile devices increasing, and more and more users using mobile devices to access websites, adapting to mobile has become an important issue. When dealing with PHP forms, we need to consider how to achieve a mobile-friendly interface and responsive design. This article explains how to handle mobile and responsive design in PHP forms and provides code examples. 1. Responsive forms using HTML5 HTML5 provides some new features that can easily implement responsive forms.
