Exemple de code de diaporama tactile mobile en js natif

Pour réaliser un effet de diaporama d'images sur un ordinateur de bureau, c'est très simple, il suffit d'utiliser l'événement click pour obtenir un effet très simple, mais sur un appareil mobile, il faut utiliser l'événement tactile de base pour le réaliser.

Voici le code complet du carrousel glissant tactile pour mobile.

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">-8">
<meta name="viewport" content="largeur=device-largeur, utilisateur-échelable=non, initial-échelle=1.0, maximum-échelle=1.0, minimum-échelle=1.0">
<style>
*{marge:0;remplissage:0;}
li{liste-style:none;}
.lb{largeur:320px;hauteur:130px;position:relative;marge:20px auto;excès: caché;}
.lb .lb_img{largeur:2240px;hauteur:130px;position:absolute;gauche:-320px;}
.lb .lb_img img{largeur:320px;hauteur:130px;flottant:gauche;affichage:block;}
.lb ul{largeur:35px;height:4px;position:absolute;bas:10px;gauche:50%;marge-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;
 // Initialiser les coordonnées du doigt
 var startPoint = 0;
 var startEle = 0;
 //Quand le doigt est appuyé
 lb.addEventListener("touchstart",function(e){
 startPoint = e.changedTouches[0].pageX;
 startEle = lb_img.offsetLeft;
 clearInterval(Time)
 });
 //Le doigt glisse
 lb.addEventListener("touchmove",function(e){
 var currPoint = e.changedTouches[0].pageX; 
 var disX = currPoint - startPoint;
  + startPoint);
 lb_img.style.left = left; + "px"; 
 });
 //Quand le doigt est levé,
 lb.addEventListener("touchend",function(e){
 	var currPoint = e.changedTouches[0].pageX;
 	var disX = - (currPoint - startPoint);
  + startPoint);
 var left = startEle 150){
 		i++;
	 	for(var q=0;q<lis.length;q++{
	  lis[q].className = ''; 
	 }
	 if(i == 7{
	 	i=2;
	 }
	 lis[i-2].className= "active" ;	 	
 	'px'; -320*disX;/32(Math.round(+i+1lb_img.style.left =+ disX 		
 0)
 	'px'; -320*}else{-1lb_img.style.left = + "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" ; 		
 	'px'; -320*(Math.round(disX-if(disX </32(Math.round(+i-2lb_img.style.left = + disX
 0)
 	'px'; -320*}else{-1lb_img.style.left = + "px";
 }
 Time=setInterval(autoplay,2000);
 (i
//)
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>

Voici l'exemple de code natif JavaScript pour la diapositive tactile mobile que je partage avec vous aujourd'hui. J'espère que cela vous servira de référence et que vous soutiendrez davantage le tutoriel à criar.

Déclaration : Le contenu de cet article est tiré d'internet, propriété de son auteur respectif. Le contenu est contribué et téléchargé par les utilisateurs d'Internet de manière volontaire. Ce site n'engage pas de droits de propriété, n'a pas été édité par l'homme et n'assume aucune responsabilité juridique. Si vous trouvez du contenu présumé enfreignant les droits d'auteur, n'hésitez pas à envoyer un email à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un email pour signaler une violation, et fournir des preuves pertinentes. Une fois confirmée, ce site supprimera immédiatement le contenu présumé enfreignant les droits d'auteur.)

Tutoriel de base