مثال على رمز تحويل التمرير في الجهاز المحمول باستخدام js

في الجهاز الشخصي، يمكن تحقيق تأثير العرض التدحرج بسهولة من خلال استخدام حدث النقر، ولكن في الجهاز المحمول، يجب استخدام حدث اللمس الأساسي لتحقيق التأثير.

هذا هو رمز العرض الكامل للعجلة التدحرج المتنقلة باستخدام اليد على الجهاز المحمول.

<!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>
<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;
 // إعداد نقطة الإصبع
 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;
 إذا (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";
 }
 إذا (disX < -150) {
 	i--;;
 	for(var q=0;q<lis.length;q++){
  lis[q].className = '';
  }
  إذا (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);
 })
//إعداد定时ة
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>

هذا هو رمز مثال التشغيل الأصلي للجافا سكربت لمطور الهاتف المحمول التلقائي الذي شاركته معكم، آمل أن يكون هذا مرجعًا لكم، وأتمنى أن تدعموا تعليمات النفخ أيضًا.

البيان: محتوى هذا المقال تم جمعه من الإنترنت، وله حقوق الملكية الأصلية للمساهمين في الإنترنت، تم تحميله من قبل المستخدمين من الإنترنت، لا يمتلك هذا الموقع حقوق الملكية، لم يتم تعديل المحتوى بشكل يدوي، ولا يتحمل الموقع أي مسؤولية قانونية مرتبطة بذلك. إذا وجدت محتوى يشتبه في انتهاك حقوق النسخ، فيرجى إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (يرجى استبدال # ب @ عند إرسال البريد الإلكتروني) لإبلاغنا، وقدم الدليل على هذا الادعاء، وإذا تم التحقق من صحة الادعاء، سيتم حذف المحتوى المشبوه فورًا.

أساسيات التعليمات

مفضل لك