移动端滑动轮播，原生JS

最新推荐文章于 2022-02-02 11:02:32 发布

anda9128

最新推荐文章于 2022-02-02 11:02:32 发布

阅读量64

点赞数

原文链接：http://www.cnblogs.com/LChenglong/p/9372438.html

版权

因为公司需要自定义两个轮播图联动，又不想引入第三方库，所以自己研究了下。

下面只是一个简单的轮播图，由此再拓展一下即可实现两个轮播图联动。

<!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>
</head>
<style>
    html{height:100%;}
    body{width: 100%;height:100%;margin:0;overflow: hidden;}
    .wrap{position: relative;overflow: hidden;}
    .box{position: absolute;list-style: none;left:0;top:0;padding:0;margin:0;}
    .box li{float:left;}
    .box{
        position: relative;
        height: 200px;
        width: 100%;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: red;

        transition: left 0.5s;
        -moz-transition: left 0.5s;    /* Firefox 4 */
        -webkit-transition: left 0.5s;    /* Safari 和 Chrome */
        -o-transition: left 0.5s;    /* Opera */
    }
    .box1{
        height: 200px;
    }
    .box2{
        background: yellow;
    }
    .box3{
        background: yellowgreen;
    }
    .box4{
        background: orange;
    }
    .box5{
        background: cyan;
    }
</style>
<body>
<div class="wrap">
    <ul class="box">
        <li><div class="box1 box2">11111</div></li>
        <li><div class="box1 box3">2222</div></li>
        <li><div class="box1 box4">3333</div></li>
        <li><div class="box1 box5">4444</div></li>
    </ul>
</div>
<script>
  // 获取dom对象
  var aLi = document.querySelectorAll('.box li');
  var box = document.querySelector('.box');
  var wrap = document.querySelector('.wrap');
  var aLiWidth = box.offsetWidth;
  
  var disX = 0;   //滑动距离
  var currNum = 0;      //当前索引
  
  // 布局
  wrap.style.height = aLi[0].offsetHeight+'px';
  box.style.width = aLi.length*100+'%';
  aLi.forEach(function(item,index){
    item.style.width = aLiWidth+'px';
  })

  // 初始化手指坐标点
  var startPoint = 0;
  var startEle = 0;
  // 手指按下--获取手指位置和box的位置
  wrap.addEventListener('touchstart',function(e){
    startPoint = e.changedTouches[0].pageX;
    startEle = box.offsetLeft;
    console.log(startEle);
  });
  // 手指滑动 
  wrap.addEventListener('touchmove',function(e){
    var currPoint = e.changedTouches[0].pageX;
    disX = currPoint-startPoint;
    var left = startEle+disX/2;
    box.style.transition = 'left 0s';
    box.style.left = left + 'px';
    // console.log(disX);   //手指滑动距离
  });
  //当手指抬起的时候，判断图片滚动离左右的距离
  wrap.addEventListener('touchend',function(e){
    var left = box.offsetLeft;
    // 判断正在滚动的图片的滚动距离和方向，以及是否是第一张或最后一张
    if(disX>100){   //向右滑动100px时
      currNum = Math.floor(-left/aLiWidth);
      currNum = currNum<=0 ? 0 : currNum;
    }else if(disX<-100){   //向左滑动100px时
      currNum = Math.floor(-left/aLiWidth)+1;
      currNum = currNum>=(aLi.length-1) ? aLi.length-1 : currNum;
    };
    box.style.transition = 'left 0.5s';
    box.style.left = -currNum*wrap.offsetWidth + 'px';
  })



</script>

</body>
</html>

 
   <!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 
   > 
  
 
   </ 
   head 
   > 
  
 
   < 
   style 
   > 
  
 
   html{ 
   height: 
   100%;} 
  
 
   body{ 
   width: 
   100%; 
   height: 
   100%; 
   margin: 
   0; 
   overflow: 
   hidden;} 
  
 
   .wrap{ 
   position: 
   relative; 
   overflow: 
   hidden;} 
  
 
   .box{ 
   position: 
   absolute; 
   list-style: 
   none; 
   left: 
   0; 
   top: 
   0; 
   padding: 
   0; 
   margin: 
   0;} 
  
 
   .box li{ 
   float: 
   left;} 
  
 
   .box{ 
  
 
   position: 
   relative; 
  
 
   height: 
   200px; 
  
 
   width: 
   100%; 
  
 
   top: 
   0; 
  
 
   bottom: 
   0; 
  
 
   left: 
   0; 
  
 
   right: 
   0; 
  
 
   background: 
   red; 
  

 
   transition: 
   left 
   0.5s; 
  
 
   -moz-transition: 
   left 
   0.5s;  
   /* Firefox 4 */ 
  
 
   -webkit-transition: 
   left 
   0.5s;   
   /* Safari 和 Chrome */ 
  
 
   -o-transition: 
   left 
   0.5s;  
   /* Opera */ 
  

    } 
  
 
   .box1{ 
  
 
   height: 
   200px; 
  

    } 
  
 
   .box2{ 
  
 
   background: 
   yellow; 
  

    } 
  
 
   .box3{ 
  
 
   background: 
   yellowgreen; 
  

    } 
  
 
   .box4{ 
  
 
   background: 
   orange; 
  

    } 
  
 
   .box5{ 
  
 
   background: 
   cyan; 
  

    } 
  
 
   < 
   / 
   style 
   > 
  
 
   < 
   body 
   > 
  
 
   < 
   div 
   class= 
   "wrap" 
   > 
  
 
   < 
   ul 
   class= 
   "box" 
   > 
  
 
   < 
   li 
   >< 
   div 
   class= 
   "box1 box2" 
   >11111 
   </ 
   div 
   ></ 
   li 
   > 
  
 
   < 
   li 
   >< 
   div 
   class= 
   "box1 box3" 
   >2222 
   </ 
   div 
   ></ 
   li 
   > 
  
 
   < 
   li 
   >< 
   div 
   class= 
   "box1 box4" 
   >3333 
   </ 
   div 
   ></ 
   li 
   > 
  
 
   < 
   li 
   >< 
   div 
   class= 
   "box1 box5" 
   >4444 
   </ 
   div 
   ></ 
   li 
   > 
  
 
   </ 
   ul 
   > 
  
 
   </ 
   div 
   > 
  
 
   < 
   script 
   > 
  
 
   // 获取dom对象 
  
 
   var 
   aLi = 
   document. 
   querySelectorAll( 
   '.box li'); 
  
 
   var 
   box = 
   document. 
   querySelector( 
   '.box'); 
  
 
   var 
   wrap = 
   document. 
   querySelector( 
   '.wrap'); 
  
 
   var 
   aLiWidth = 
   box. 
   offsetWidth; 
  

      
  
 
   var 
   disX = 
   0; 
   //滑动距离 
  
 
   var 
   currNum = 
   0; 
   //当前索引 
  

      
  
 
   // 布局 
  
 
   wrap. 
   style. 
   height = 
   aLi[ 
   0]. 
   offsetHeight+ 
   'px'; 
  
 
   box. 
   style. 
   width = 
   aLi. 
   length* 
   100+ 
   '%'; 
  
 
   aLi. 
   forEach( 
   function( 
   item, 
   index){ 
  
 
   item. 
   style. 
   width = 
   aLiWidth+ 
   'px'; 
  

    }) 
  

 
   // 初始化手指坐标点 
  
 
   var 
   startPoint = 
   0; 
  
 
   var 
   startEle = 
   0; 
  
 
   // 手指按下--获取手指位置和box的位置 
  
 
   wrap. 
   addEventListener( 
   'touchstart', 
   function( 
   e){ 
  
 
   startPoint = 
   e. 
   changedTouches[ 
   0]. 
   pageX; 
  
 
   startEle = 
   box. 
   offsetLeft; 
  
 
   console. 
   log( 
   startEle); 
  

    }); 
  
 
   // 手指滑动  
  
 
   wrap. 
   addEventListener( 
   'touchmove', 
   function( 
   e){ 
  
 
   var 
   currPoint = 
   e. 
   changedTouches[ 
   0]. 
   pageX; 
  
 
   disX = 
   currPoint- 
   startPoint; 
  
 
   var 
   left = 
   startEle+ 
   disX/ 
   2; 
  
 
   box. 
   style. 
   transition = 
   'left 0s'; 
  
 
   box. 
   style. 
   left = 
   left + 
   'px'; 
  
 
   // console.log(disX); //手指滑动距离 
  

    }); 
  
 
   //当手指抬起的时候，判断图片滚动离左右的距离 
  
 
   wrap. 
   addEventListener( 
   'touchend', 
   function( 
   e){ 
  
 
   var 
   left = 
   box. 
   offsetLeft; 
  
 
   // 判断正在滚动的图片的滚动距离和方向，以及是否是第一张或最后一张 
  
 
   if( 
   disX> 
   100){ 
   //向右滑动100px时 
  
 
   currNum = 
   Math. 
   floor(- 
   left/ 
   aLiWidth); 
  
 
   currNum = 
   currNum<= 
   0 ? 
   0 : 
   currNum; 
  

    } 
   else 
   if( 
   disX<- 
   100){ 
   //向左滑动100px时 
  
 
   currNum = 
   Math. 
   floor(- 
   left/ 
   aLiWidth)+ 
   1; 
  
 
   currNum = 
   currNum>=( 
   aLi. 
   length- 
   1) ? 
   aLi. 
   length- 
   1 : 
   currNum; 
  

    }; 
  
 
   box. 
   style. 
   transition = 
   'left 0.5s'; 
  
 
   box. 
   style. 
   left = - 
   currNum* 
   wrap. 
   offsetWidth + 
   'px'; 
  

    }) 
  



 
   < 
   / 
   script 
   > 
  

 
   </ 
   body 
   > 
  
 
   </ 
   html 
   > 
  

转载于:https://www.cnblogs.com/LChenglong/p/9372438.html

anda9128

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端滑动轮播，原生JS

因为公司需要自定义两个轮播图联动，又不想引入第三方库，所以自己研究了下。下面只是一个简单的轮播图，由此再拓展一下即可实现两个轮播图联动。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="v...
复制链接

扫一扫