Ejemplo de código para la implementación de deslizamiento táctil en el dispositivo móvil con JavaScript

En el PC, la implementación del efecto de desplazamiento de imágenes es muy sencilla, simplemente mediante el uso del evento click se puede lograr el efecto de manera muy sencilla, pero en el dispositivo móvil, se debe implementar a través del evento de toque nuclear.

A continuación, se muestra el código completo del carrusel de deslizamiento de dedos para dispositivos móviles.

<!DOCTYPE html> 
<html>
<cabeza>
<meta charset="utf-8">
<meta nombre="viewport" contenido="ancho=device-ancho, usuario-escalable=no, inicial-escala=1.0, máximo-escala=1.0, mínimo-escala=1.0">
<estilo>
*{margen:0;relleno:0;}
li{lista-estilo:none;}
.lb{ancho:320px;alto:130px;posición:relative;margen:20px auto;desbordamiento:oculto;}
.lb .lb_img{ancho:2240px;alto:130px;posición:absoluta;izquierda:-320px;}
.lb .lb_img img{ancho:320px;alto:130px;flotar:left;mostrar:block;}
.lb ul{ancho:35px;height:4px;posición:absoluta;inferior:10px;izquierda:50%;margen-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>
<div class="lb">
		<div 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">
		</div>
		<ul>
			<li class="active"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
</div>	
<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;
 // inicializar el punto de coordenada del dedo
 var startPoint = 0;
 var startEle = 0;
 //cuando el dedo se presiona
 lb.addEventListener("touchstart",function(e){
 startPoint = e.changedTouches[0].pageX;
 startEle = lb_img.offsetLeft;
 clearInterval(Time)
 });
 //deslizar el dedo
 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"; 
 });
 //cuando el dedo se levanta,
 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'; 		
 }
 	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';
 }
 	lb_img.style.left = -320*(i-1) + "px";
 }
 Time=setInterval(autoplay,2000);
 )
//Configurar temporizador
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>

Este código de ejemplo de desplazamiento de diapositivas táctil en móviles implementado con JavaScript nativo es todo lo que el editor comparte con ustedes. Espero que les sirva de referencia y esperamos que nos apoyen más en el tutorial de alarido.

Declaración: El contenido de este artículo se ha obtenido de la red, es propiedad del autor original, el contenido se ha contribuido y subido por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha editado artificialmente y no asume responsabilidad alguna por la responsabilidad legal. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @ para denunciar y proporcione evidencia. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción de derechos de autor.)

Tutoriales básicos

Te gustará