js realisiert den Effekt des Finger-Gleitkarussells auf mobilen Endgeräten-js-Tutorial-php.cn

js realisiert den Effekt des Finger-Gleitkarussells auf mobilen Endgeräten

小云云

Freigeben： 2018-01-03 09:24:11

Original

3153 Leute haben es durchsucht

Dieser Artikel zeigt Ihnen hauptsächlich ein Beispiel für die native Implementierung des Finger-Slide-Carousel-Effekts auf dem mobilen Endgerät. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich ist. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

lautet wie folgt:

<!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: 2000px;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: red;
  }
  .box1{
    height: 2000px;
  }
  .box2{
    background: yellow;
  }
  .box3{
    background: yellowgreen;
  }
  .box4{
    background: orange;
  }
  .box5{
    background: cyan;
  }
</style>
<body>
<p class="wrap">
  <ul class="box">
    <li><p class="box1 box2">11111</p></li>
    <li><p class="box1 box3">2222</p></li>
    <li><p class="box1 box4">3333</p></li>
    <li><p class="box1 box5">4444</p></li>
  </ul>
</p>
<script>
  var aLi = document.querySelectorAll(".box li");
  var box = document.querySelector('.box');
  var wrap = document.querySelector('.wrap');
  var aLiWidth = box.offsetWidth;
  console.log('aLiWidth: ' + aLiWidth)
  wrap.style.height = aLi[0].offsetHeight + 'px';
  // 设置盒子的宽度
  box.style.width = aLi.length*100 + '%';
  for(var i=0;i<aLi.length;i++){
    aLi[i].style.width = 1/aLi.length * 100 + &#39;%&#39;;
  };
  // 初始化手指坐标点
  var startPoint = 0;
  var startEle = 0;
  //手指按下
  wrap.addEventListener("touchstart",function(e){
    startPoint = e.changedTouches[0].pageX;
    startEle = box.offsetLeft;
  });
  //手指滑动
  wrap.addEventListener("touchmove",function(e){
    var currPoint = e.changedTouches[0].pageX;
    var disX = currPoint - startPoint;
    var left = startEle + disX;
    box.style.left = left + &#39;px&#39;;
  });
  //当手指抬起的时候，判断图片滚动离左右的距离，当
  wrap.addEventListener("touchend",function(e){
    var left = box.offsetLeft;
// 判断正在滚动的图片距离左右图片的远近，以及是否为最后一张或者第一张
    var currNum = Math.round(-left/aLiWidth);
    currNum = currNum>=(aLi.length-1) ? aLi.length-1 : currNum;
    currNum = currNum<=0 ? 0 : currNum;
    box.style.left = -currNum*wrap.offsetWidth + &#39;px&#39;;
  })

</script>

</body>
</html>

Nach dem Login kopieren

Verwandte Empfehlungen:

Karusselleffekt der JQuery-Version und Erweiterung der Beispielfreigabe für Erweiterungen

Über JQuery und HTML+CSS zur Implementierung der Karussellbildfreigabe mit kleinen Punkten und linken und rechten Schaltflächen

Beispiel für eine ausführliche Erklärung von JQuery zur Erzielung eines linken und rechten Karussellbildeffekts

Das obige ist der detaillierte Inhalt vonjs realisiert den Effekt des Finger-Gleitkarussells auf mobilen Endgeräten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!