Home > Article > Web Front-end > JavaScript Tutorial: Implementation of Carousel Chart Effect on Mobile Terminal

JavaScript Tutorial: Implementation of Carousel Chart Effect on Mobile Terminal

巴扎黑Original: 2017-08-17 16:08:321305browse

This article mainly introduces the js implementation of the carousel effect on the mobile terminal in detail. It has a certain reference value. Interested friends can refer to it.

The example of this article is to share with you the mobile terminal. The specific code for the carousel effect display is for your reference. The specific content is as follows

<!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>

The boundary judgment logic can refer to the figure below

The above is the detailed content of JavaScript Tutorial: Implementation of Carousel Chart Effect on Mobile Terminal. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed introduction to the basics of JavaScript mobile events and a summary of commonly used event librariesNext article：Detailed introduction to the basics of JavaScript mobile events and a summary of commonly used event libraries

See more

JavaScript Tutorial: Implementation of Carousel Chart Effect on Mobile Terminal

Related articles