모바일 기기에서 터치 슬라이드 레이아웃 구현 예제 코드

PC 단말기에서 이미지 루프 효과를 구현하는 것은 매우 간단합니다. 클릭 이벤트를 사용하여 매우 간단하게 효과를 구현할 수 있습니다. 하지만 모바일 단말기에서는 핵심의 터치 이벤트를 사용하여 구현해야 합니다.

이제는 모바일 단말기에서 손가락으로 슬라이드 루프의 전체 코드입니다。

<!DOCTYPE html> 
<html>
<헤드>
<meta charset="utf-8">-8">
<meta name="viewport" content="가로=device-가로, 사용자-스케일 가능=아니요, 초기-스케일=1.0, 최대-스케일=1.0, 최소-스케일=1.0">
<스타일>
*{마진:0; Padding:0;}
li{목록-스타일:none;}
.lb{가로:320px;높이:130px;위치:상대적;마진:20px 자동;overflow: 숨기기;}
.lb .lb_img{가로:2240px;높이:130px;위치:절대적;왼쪽:-320px;}
.lb .lb_img img{가로:320px;높이:130px;浮动:왼쪽;표시:블록;}
.lb ul{가로:35px;height:4px;위치:절대적;하단:10px;왼쪽:50%;마진-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;
 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);
 )
//定时器 설정
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>

이 기본 JavaScript로 구현된 모바일 탭 슬라이드 예제 코드는 편집자가 모두 공유한 것이며, 여러분에게 참고가 되길 바랍니다. 또한, 많은 지지와 환호를 부탁드립니다.

고지사항：이 문서의 내용은 인터넷에서 가져왔으며, 저작권자가 소유하고 있으며, 인터넷 사용자가 자발적으로 기여하고 자체적으로 업로드한 내용입니다. 이 웹사이트는 소유권을 가지지 않으며, 인공 편집 처리를 하지 않았으며, 이에 대한 법적 책임을 부담하지 않습니다. 저작권 위반이 의심되는 내용을 발견하면 메일을 보내 주시기 바랍니다: notice#oldtoolbag.com（메일을 보내는 경우，#을 @으로 변경하십시오. 신고하고 관련 증거를 제공하시면, 실제로 확인되면 이 사이트는 즉시 저작권 위반 내용을 삭제합니다。）

기본 튜토리얼