집 > 기사 > 웹 프론트엔드 > JS는 모바일 터치 캐러셀 효과를 만듭니다.

JS는 모바일 터치 캐러셀 효과를 만듭니다.

php中世界最好的语言원래의: 2018-04-14 09:45:341818검색

이번에는 모바일 터치 캐러셀 효과를 만들기 위한 JS를 가져오겠습니다. 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>
<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 = &#39;&#39;; 
	 }
	 if(i == 7){
	 	i=2;
	 }
	 lis[i-2].className= "active" ;	 	
 	lb_img.style.left = -320*(Math.round(disX/320)+i+1)+ &#39;px&#39;; 		
 }else{
 	lb_img.style.left = -320*(i-1) + "px";
 }
 if(disX < -150){
 	i--;
 	for(var q=0;q<lis.length;q++){
  lis[q].className = &#39;&#39;;
  }
  if(i == 1){
 		i=6;
 	}
 	lis[i-2].className= "active" ; 		
 	lb_img.style.left = -320*(Math.round(-disX/320)+i-2) + &#39;px&#39;;
	 	
 }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 = &#39;&#39;; 
 }
 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>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!