您的位置: 首页  >  IT文章  >  移动端滑动轮播，原生JS

移动端滑动轮播，原生JS

分类: IT文章 • 2022-07-24 20:38:52

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

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

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

相关推荐