移动端滑动轮播，原生JS

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

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

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

移动端滑动轮播，原生JS

猜你喜欢