移动端无缝滑屏原生实现方法。

效果图:
在这里插入图片描述
代码:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>移动端触屏事件</title>
  <style>
    *{
      margin:0;
      padding:0;
      touch-action: none;
    }
   ul{
     list-style: none;
   }
   a{
     text-decoration: none;
   }
    img{
      display:block;
    }
    html,body{
      height: 100%;
      overflow: hidden;
    }
    #wrap{
      position: relative;
    }
    #list{
      position: absolute;
      /* width:500%; */
      /* overflow: hidden;解决浮动的高度塌陷 */
    }
    #list li{
      /* width:20%; */
      float: left;
    }
    #list li img{
      width:100%;
    }
    #wrap .icons{
      position: absolute;
      left:0;
      bottom: 10px;
      width:100%;
      height: 10px;
      text-align: center;
    }
    #wrap .icons span{
      display: inline-block;
      width:10px;
      height: 10px;
      background: grey;
      border-radius: 50%;
    }
    #wrap .icons span.active{
      background: deeppink;
    }
  </style>
</head>
<body>
  <!-- javascript:;这个才是让a链接不产生页面刷新变化，直接是空链接 -->
  <!-- a链接中写#会产生页面的刷新变化 -->
  <div id="wrap">
    <ul id="list">
      <li><a href="javascript:;"><img src="./img/下载1.jpg" alt=""></a></li>
      <li><a href="javascript:;"><img src="./img/下载2.jpg" alt=""></a></li>
      <li><a href="javascript:;"><img src="./img/下载3.gif" alt=""></a></li>
      <li><a href="javascript:;"><img src="./img/下载3.jpg" alt=""></a></li>
      <li><a href="javascript:;"><img src="./img/下载4.gif" alt=""></a></li>
    </ul>
    <div class="icons">
      <span class="active"></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
  <script type="text/javascript">

   window.onload=function(){
//解除浏览器的默认行为
   document.addEventListener('touchstart',function(event){
     event.preventDefault();
   });
//获取元素
   var wrap=document.getElementById('wrap');
   var list=document.getElementById('list');
   list.innerHTML+=list.innerHTML;
   var liNodes=document.querySelectorAll('#list li');
   var spanNodes=document.querySelectorAll('.icons span');
//创建样式标签存放里面
   var styleNode=document.createElement('style');
   styleNode.innerHTML='#list{width:'+liNodes.length+'00%;}';//图片乘以百分比
//等于是覆盖 加等于是拼接
   styleNode.innerHTML+='#list li{width:'+100/liNodes.length+'%}';//换算图片比例
   styleNode.innerHTML+='#wrap{height:'+liNodes[0].offsetHeight+'px;}';
   document.head.appendChild(styleNode);//添加样式
//滑动
//定义元素初始位置
  var eleX=0;
//定义手指初始位置
  var stratX=0;
//定义手指距离差
// var disX=0;
//offsetLeft无法获取通过2D变换产生的偏移,可以通过translateX变量来记录偏移量。
  var translateX=0; 
//需要一个索引值
   var now=0;
//1.触摸开始
  wrap.addEventListener('touchstart',function(event){
    var touch=event.changedTouches[0];
//初始时清除过渡效果
    list.style.transition="none";
    
    stratX=touch.clientX; 
//用now值修改边界值,做出无缝滑屏效果(滑倒最后一张，自动回到第一张，继续轮播)
    if(now==0){//spanNodes.length值为5
      now=spanNodes.length;//当now值为最后一张时，让小圆点自动回到下一组的图片第一张
    }else if(now ==liNodes.length-1){
      now=spanNodes.length-1;//10-1=9
    }
//根据当前的now值修改位置
  translateX=-now*document.documentElement.clientWidth;
  eleX=translateX;//记录偏移量
  list.style.transform='translateX('+translateX+'px)';
})
 //2.move
 wrap.addEventListener('touchmove',function(event){
   var touch=event.changedTouches[0];
//手指结束位置
   var endX=touch.clientX;
//手指距离差
   var disX=endX - stratX;//原始位置
   translateX=disX + eleX;//手指距离差+原来的位置=最新偏移量
   list.style.transform='translateX('+translateX+'px)';
 })
//3.end跳转的时候做出改变
 wrap.addEventListener('touchend',function(event){//touchend跳转的逻辑
   var touch=event.changedTouches[0];
//当前元素得位置
   var left =translateX;
   console.log(left);
  
//向左滑动 disX<0 让图片去下一张
//  if(disX<0){//当前位置/浏览器的位置
//    now=Math.round(-left/document.documentElement.clientWidth);//ceil向上取整
//  }else{
// //向右滑动 disX>0 让图片去上一张
//    now=Math.round(-left/document.documentElement.clientWidth);//floor向下取整
//  } 
   now=Math.round(-left/document.documentElement.clientWidth);
//范围限定 索引最小值为0 最大值为图片总个数
  //  if(now<0){//无缝滚动了，所以不需要限制图片个数了。
  //    now=0;
  //  }else if(now>liNodes.length-1){
  //    now=liNodes.length-1;
  //  }
   
// now*document.documentElement.clientWidth：解析是当前索引乘以浏览器宽度
   translateX=-now * document.documentElement.clientWidth;//图片索引位置
//添加过渡
   list.style.transition='1s transform';//2s transform属性名
   list.style.transform='translateX('+translateX+'px)';
//小圆点
   for(var i=0;i<spanNodes.length;i++){//所有的先清除
     spanNodes[i].className='';
   }
    spanNodes[now%spanNodes.length].className='active';
 })

}
  </script>
</body>
</html>
总结:2D转换过渡效果，比定位方法的实现，更好的解决性能的优化。
移动端无缝滑屏原生实现方法。

猜你喜欢
