집 > 기사 > 웹 프론트엔드 > JavaScript 튜토리얼: 모바일 터미널에서 캐러셀 차트 효과 구현

JavaScript 튜토리얼: 모바일 터미널에서 캐러셀 차트 효과 구현

巴扎黑원래의: 2017-08-17 16:08:321350검색

이 글에서는 주로 모바일 단말에서 js의 캐러셀 효과 구현을 자세히 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.

이 글의 예는 캐러셀 효과의 표시를 공유합니다. 구체적인 코드는 참고용입니다. 구체적인 내용은 다음과 같습니다

<!DOCTYPE html>
<html lang="en">
<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">
 <title>Document</title>
 <link rel="stylesheet" href="reset.css" rel="external nofollow" >
 <style>
 html,body{
 width:100%;
 overflow-x:hidden;
 }
 html{
 font-size:100px;
 }
 .banner{
 position:relative;
 height:3rem;
 overflow:hidden;
 }
 .banner .wrapper{
 position:absolute;
 top:0;
 left:-100%;
 height:100%;
 }
 .banner .wrapper .slide{
 float:left;
 height:100%;
 background:#eee;
 }
 .banner .wrapper .slide img{
 display:none;
 width:100%;
 height:100%;
 }
 .tip{
 position:absolute;
 left:0;
 bottom:.1rem;
 width:100%;
 height:.16rem;
 text-align:center;
 }
 .tip li{
 display:inline-block;
 margin:0 .03rem;
 width:.16rem;
 height:.16rem;
 background:rgba(0,0,0,0.2);
 border-radius:50%;
 vertical-align:top;
 }
 .tip li.bg{
 background:#007aff;
 }
 </style>
</head>
<body>
 <section class=&#39;banner&#39;>
 <p class=&#39;wrapper&#39;>
 <!--实现无缝滚动:把第一张放末尾 最后一张放开头-->
 <p class=&#39;slide&#39;><img src="img/banner5.jpg" alt=""></p>
 <p class=&#39;slide&#39;><img src="img/banner1.jpg" alt=""></p>
 <p class=&#39;slide&#39;><img src="img/banner2.jpg" alt=""></p>
 <p class=&#39;slide&#39;><img src="img/banner3.jpg" alt=""></p>
 <p class=&#39;slide&#39;><img src="img/banner4.jpg" alt=""></p>
 <p class=&#39;slide&#39;><img src="img/banner5.jpg" alt=""></p>
 <p class=&#39;slide&#39;><img src="img/banner1.jpg" alt=""></p>
 </p>
 <ul class=&#39;tip&#39;>
 <li class=&#39;bg&#39;></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul>
 </section>

 <script charset=&#39;utf-8&#39; src=&#39;zepto.min.js&#39;></script>
 <script charset=&#39;utf-8&#39;>
 //REM
 ~function(){
 document.documentElement.style.fontSize = document.documentElement.clientWidth/640*100 + &#39;px&#39;;
 }()
 //页面中如果自己使用了TOUCH MOVE等原生事件，需要把浏览器的默认行为阻止掉
 $(document).on(&#39;touchmove touchstart touchend&#39;,function(ev){
 ev.preventDefault();
 })
 //BANNER
 var bannerRender = (function(){
 var winW = document.documentElement.clientWidth,
 maxL = 0,
 minL = 0;
 var $banner = $(&#39;.banner&#39;),
 $wrapper = $banner.children(&#39;.wrapper&#39;),
 $slideList = $wrapper.children(&#39;.slide&#39;),
 $imgList = $wrapper.find(&#39;img&#39;);
 var step = 1,
 count = 0,
 followTimer = null;

 //public fn
 function isSwipe(strX,strY,endX,endY){
 return Math.abs(endX - strX)>30 || Math.abs(endY - strY) > 30)
 }
 function swipeDir(strX,strY,endX,endY){
 return Math.abs(endX - strX)>=Math.abs(endY - strY)?(endX - strX>0?&#39;right&#39;:&#39;left&#39;):(endY - strY>0?&#39;down&#39;:&#39;up&#39;);
 }
 //touch start
 function dragStart(ev){
 var point = ev.touches[0];
 $wrapper.attr({
  strL:parseFloat($wrapper.css(&#39;left&#39;)),
  strX:point.clientX,
  strY:point.clientY,
  isMove:false,
  dir:null,
  changeX:null
 })
 }
 //touch move
 function dragIng(ev){
 var point = ev.touches[0];
 var endX = point.clientX,
  endY = point.clientY,
  strX = parseFloat($wrapper.attr(&#39;strX&#39;)),
  strY = parseFloat($wrapper.attr(&#39;strY&#39;)),
  strL = parseFloat($wrapper.attr(&#39;strL&#39;)),
  changeX = endX - strX;
 //计算出是否滑动以及滑动的方向：只有是左右滑动才进行处理
 var isMove = isSwipe(strX,strY,endX,endY),
  dir = swipeDir(strX,strY,endX,endY);
 if(isMove && /(left|right)/i.test(dir)){
  $wrapper.attr({
  isMove:true,
  dir:dir,
  changeX:changeX
  });
  var curL = strL+changeX;
  curL = curL>maxL?maxL:(curL<minL?minL:curL);
  $wrapper[0].style.webkitTransitionDuration = &#39;0s&#39;;
  $wrapper.css(&#39;left&#39;,curL);
 }



 }
 //touch end
 function dragEnd(){
 var isMove = $wrapper.attr(&#39;isMove&#39;),
  dir = $wrapper.attr(&#39;dir&#39;),
  changeX = parseFloat($wrapper.attr(&#39;changeX&#39;));
 if(isMove && /(left|right)/i.test(dir)){
  if(Math.abs(changeX)>=winW/2){
  if(dir===&#39;left&#39;){
  step++;
  }else{
  step--;
  }
  }
 }

 $wrapper[0].style.webkitTransitionDuration = &#39;.2s&#39;;
 $wrapper.css(&#39;left&#39;,-step*winW);
 lazyImg();
 //动画运动过程中，我们监听一个定时器:动画运动完成判断当前是否运动到边界，如果运动到达了边界，我们让其立马回到自己的真实位置
 window.clearTimeout(followTimer)
 followTimer = window.setTimeout(function(){
  if(step===0){
  $wrapper[0].style.webkitTransitionDuration = &#39;0s&#39;;
  $wrapper.css(&#39;left&#39;,-(count-2)*winW);
  step = count-2;
  lazyImg();
  }
  if(step===count-1){
  $wrapper[0].style.webkitTransitionDuration = &#39;0s&#39;;
  $wrapper.css(&#39;left&#39;,-winW);
  step = 1;
  lazyImg();
  }
  window.clearTimeout(followTimer)
 },200)

 }
 //图片延迟加载，让当前的活动块及相邻的两个活动块进行加载
 function lazyImg(){
 var $cur = $slideList.eq(step),
  $tar = $cur.add($cur.prev()).add($cur.next());
 $tar.each(function(index,item){
  var $img = $(item).children(&#39;img&#39;);
  if($img.attr(&#39;isLoad&#39;)===&#39;true&#39;){
  //ATTR存储或者获取的属性值都是一个字符串，如果当前的图片已经加载过了，我们就不需要重新的加载了
  return;
  }
  var oImg = new Image;
  oImg.src = $img.attr(&#39;src&#39;);
  oImg.onload = function(){
  $img.attr({
  src:this.src,
  isLoad:true
  }).css(&#39;display&#39;,&#39;block&#39;)
  oImg = null;
  }
 })

 }

 return{
 init:function(){
  //init css style
  count = $slideList.length;
  minL = -($slideList.length-1)*winW;
  $wrapper.css(&#39;width&#39;,$slideList.length*winW);
  $slideList.css(&#39;width&#39;,winW);
  //lazy img
  lazyImg();
  $banner.on(&#39;touchstart&#39;,dragStart).on(&#39;touchmove&#39;,dragIng).on(&#39;touchend&#39;,dragEnd)
 }
 }
 })()

 bannerRender.init();
 </script>
</body>
</html>

경계 판단 로직은 아래 사진을 참고하세요

위 내용은 JavaScript 튜토리얼: 모바일 터미널에서 캐러셀 차트 효과 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：JavaScript 모바일 이벤트의 기본 사항에 대한 자세한 소개와 일반적으로 사용되는 이벤트 라이브러리 요약다음 기사：JavaScript 모바일 이벤트의 기본 사항에 대한 자세한 소개와 일반적으로 사용되는 이벤트 라이브러리 요약