当前位置：Gxlcms > JavaScript > js实现移动端轮播图效果

js实现移动端轮播图效果

时间：2021-07-01 10:21:17 帮助过：23人阅读

本文实例为大家分享了移动端轮播图效果展示的具体代码，供大家参考，具体内容如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  6.  <title>Document</title>
  7.  <link rel="stylesheet" href="reset.css" rel="external nofollow" >
  8.  <style>
  9.  html,body{
  10.  width:100%;
  11.  overflow-x:hidden;
  12.  }
  13.  html{
  14.  font-size:100px;
  15.  }
  16.  .banner{
  17.  position:relative;
  18.  height:3rem;
  19.  overflow:hidden;
  20.  }
  21.  .banner .wrapper{
  22.  position:absolute;
  23.  top:0;
  24.  left:-100%;
  25.  height:100%;
  26.  }
  27.  .banner .wrapper .slide{
  28.  float:left;
  29.  height:100%;
  30.  background:#eee;
  31.  }
  32.  .banner .wrapper .slide img{
  33.  display:none;
  34.  width:100%;
  35.  height:100%;
  36.  }
  37.  .tip{
  38.  position:absolute;
  39.  left:0;
  40.  bottom:.1rem;
  41.  width:100%;
  42.  height:.16rem;
  43.  text-align:center;
  44.  }
  45.  .tip li{
  46.  display:inline-block;
  47.  margin:0 .03rem;
  48.  width:.16rem;
  49.  height:.16rem;
  50.  background:rgba(0,0,0,0.2);
  51.  border-radius:50%;
  52.  vertical-align:top;
  53.  }
  54.  .tip li.bg{
  55.  background:#007aff;
  56.  }
  57.  </style>
  58. </head>
  59. <body>
  60.  <section class='banner'>
  61.  <div class='wrapper'>
  62.  <!--实现无缝滚动:把第一张放末尾 最后一张放开头-->
  63.  <div class='slide'><img data-src="img/banner5.jpg" alt=""></div>
  64.  <div class='slide'><img data-src="img/banner1.jpg" alt=""></div>
  65.  <div class='slide'><img data-src="img/banner2.jpg" alt=""></div>
  66.  <div class='slide'><img data-src="img/banner3.jpg" alt=""></div>
  67.  <div class='slide'><img data-src="img/banner4.jpg" alt=""></div>
  68.  <div class='slide'><img data-src="img/banner5.jpg" alt=""></div>
  69.  <div class='slide'><img data-src="img/banner1.jpg" alt=""></div>
  70.  </div>
  71.  <ul class='tip'>
  72.  <li class='bg'></li>
  73.  <li></li>
  74.  <li></li>
  75.  <li></li>
  76.  <li></li>
  77.  </ul>
  78.  </section>
  79.  <script charset='utf-8' src='zepto.min.js'></script>
  80.  <script charset='utf-8'>
  81.  //REM
  82.  ~function(){
  83.  document.documentElement.style.fontSize = document.documentElement.clientWidth/640*100 + 'px';
  84.  }()
  85.  //页面中如果自己使用了TOUCH MOVE等原生事件，需要把浏览器的默认行为阻止掉
  86.  $(document).on('touchmove touchstart touchend',function(ev){
  87.  ev.preventDefault();
  88.  })
  89.  //BANNER
  90.  var bannerRender = (function(){
  91.  var winW = document.documentElement.clientWidth,
  92.  maxL = 0,
  93.  minL = 0;
  94.  var $banner = $('.banner'),
  95.  $wrapper = $banner.children('.wrapper'),
  96.  $slideList = $wrapper.children('.slide'),
  97.  $imgList = $wrapper.find('img');
  98.  var step = 1,
  99.  count = 0,
  100.  followTimer = null;
  101.  //public fn
  102.  function isSwipe(strX,strY,endX,endY){
  103.  return Math.abs(endX - strX)>30 || Math.abs(endY - strY) > 30)
  104.  }
  105.  function swipeDir(strX,strY,endX,endY){
  106.  return Math.abs(endX - strX)>=Math.abs(endY - strY)?(endX - strX>0?'right':'left'):(endY - strY>0?'down':'up');
  107.  }
  108.  //touch start
  109.  function dragStart(ev){
  110.  var point = ev.touches[0];
  111.  $wrapper.attr({
  112.   strL:parseFloat($wrapper.css('left')),
  113.   strX:point.clientX,
  114.   strY:point.clientY,
  115.   isMove:false,
  116.   dir:null,
  117.   changeX:null
  118.  })
  119.  }
  120.  //touch move
  121.  function dragIng(ev){
  122.  var point = ev.touches[0];
  123.  var endX = point.clientX,
  124.   endY = point.clientY,
  125.   strX = parseFloat($wrapper.attr('strX')),
  126.   strY = parseFloat($wrapper.attr('strY')),
  127.   strL = parseFloat($wrapper.attr('strL')),
  128.   changeX = endX - strX;
  129.  //计算出是否滑动以及滑动的方向：只有是左右滑动才进行处理
  130.  var isMove = isSwipe(strX,strY,endX,endY),
  131.   dir = swipeDir(strX,strY,endX,endY);
  132.  if(isMove && /(left|right)/i.test(dir)){
  133.   $wrapper.attr({
  134.   isMove:true,
  135.   dir:dir,
  136.   changeX:changeX
  137.   });
  138.   var curL = strL+changeX;
  139.   curL = curL>maxL?maxL:(curL<minL?minL:curL);
  140.   $wrapper[0].style.webkitTransitionDuration = '0s';
  141.   $wrapper.css('left',curL);
  142.  }
  143.  }
  144.  //touch end
  145.  function dragEnd(){
  146.  var isMove = $wrapper.attr('isMove'),
  147.   dir = $wrapper.attr('dir'),
  148.   changeX = parseFloat($wrapper.attr('changeX'));
  149.  if(isMove && /(left|right)/i.test(dir)){
  150.   if(Math.abs(changeX)>=winW/2){
  151.   if(dir==='left'){
  152.   step++;
  153.   }else{
  154.   step--;
  155.   }
  156.   }
  157.  }
  158.  $wrapper[0].style.webkitTransitionDuration = '.2s';
  159.  $wrapper.css('left',-step*winW);
  160.  lazyImg();
  161.  //动画运动过程中，我们监听一个定时器:动画运动完成判断当前是否运动到边界，如果运动到达了边界，我们让其立马回到自己的真实位置
  162.  window.clearTimeout(followTimer)
  163.  followTimer = window.setTimeout(function(){
  164.   if(step===0){
  165.   $wrapper[0].style.webkitTransitionDuration = '0s';
  166.   $wrapper.css('left',-(count-2)*winW);
  167.   step = count-2;
  168.   lazyImg();
  169.   }
  170.   if(step===count-1){
  171.   $wrapper[0].style.webkitTransitionDuration = '0s';
  172.   $wrapper.css('left',-winW);
  173.   step = 1;
  174.   lazyImg();
  175.   }
  176.   window.clearTimeout(followTimer)
  177.  },200)
  178.  }
  179.  //图片延迟加载，让当前的活动块及相邻的两个活动块进行加载
  180.  function lazyImg(){
  181.  var $cur = $slideList.eq(step),
  182.   $tar = $cur.add($cur.prev()).add($cur.next());
  183.  $tar.each(function(index,item){
  184.   var $img = $(item).children('img');
  185.   if($img.attr('isLoad')==='true'){
  186.   //ATTR存储或者获取的属性值都是一个字符串，如果当前的图片已经加载过了，我们就不需要重新的加载了
  187.   return;
  188.   }
  189.   var oImg = new Image;
  190.   oImg.src = $img.attr('data-src');
  191.   oImg.onload = function(){
  192.   $img.attr({
  193.   src:this.src,
  194.   isLoad:true
  195.   }).css('display','block')
  196.   oImg = null;
  197.   }
  198.  })
  199.  }
  200.  return{
  201.  init:function(){
  202.   //init css style
  203.   count = $slideList.length;
  204.   minL = -($slideList.length-1)*winW;
  205.   $wrapper.css('width',$slideList.length*winW);
  206.   $slideList.css('width',winW);
  207.   //lazy img
  208.   lazyImg();
  209.   $banner.on('touchstart',dragStart).on('touchmove',dragIng).on('touchend',dragEnd)
  210.  }
  211.  }
  212.  })()
  213.  bannerRender.init();
  214.  </script>
  215. </body>
  216. </html>

边界判断逻辑可参照下图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！