Maison > Article > interface Web > js implémente l'effet carrousel coulissant des doigts sur le terminal mobile

js implémente l'effet carrousel coulissant des doigts sur le terminal mobile

小云云original: 2018-01-03 09:24:113089parcourir

Cet article partage principalement avec vous un exemple d'implémentation native en js de l'effet carrousel coulissant des doigts sur le terminal mobile. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

est la suivante :

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

Recommandations associées :

Effet carrousel de la version Jquery et extension du partage d'exemples d'extension

À propos de JQuery et html+css pour réaliser le partage d'images de carrousel avec des petits points et des boutons gauche et droit

Exemple d'explication détaillée de jquery pour réaliser l'effet de gauche et images du carrousel de droite

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

jquery css html JS

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de la méthode d'écriture ajax dans wordpressArticle suivant：Explication détaillée de la méthode d'écriture ajax dans wordpress

Articles Liés

Voir plus