H5 implémente une version à écran tactile du carrousel

Cette fois, je vais vous apporter H5 pour implémenter la version à écran tactile du carrousel. Quelles sont les précautions pour implémenter la version à écran tactile H5 du carrousel. Ce qui suit est un cas pratique, prenons. un regard.

Je suis nouveau dans le front-end et j'aimerais partager le processus de mise en œuvre du carrousel à écran tactile sur les téléphones mobiles. Les fonctions générales sont les suivantes :

1. 🎜>

2. La largeur peut être arbitraire. Les paramètres n'ont pas besoin d'être de la même largeur que l'écran

3 La page peut défiler verticalement

4. pour surveiller la commutation des éléments

5 Pure js, sans aucun tiers Bibliothèque tierce

Principe

1. Supposons que la largeur du sous-élément .item est de 375 pixels, utilisez le

positionnement absolu pour tout déplacer. Placez l'élément enfant dans l'élément parent

2. Définissez la largeur du parent élément .carousel à 375px, soit la même largeur que l'élément enfant .item

3. Ajoutez un événement tactile à l'élément parent .carousel : touchstart, touchmove, touchend

4. le doigt est enfoncé, enregistrez la position initiale (clientX)

5. Lorsque le doigt glisse, la direction de glissement est déterminée par la distance de glissement :

① Faites glisser votre doigt vers la gauche, et l'élément actuel et l'élément à droite de l'élément actuel seront déplacés en même temps

② Faites glisser votre doigt vers la droite, et vous déplacerez l'élément actuel et l'élément à gauche de l'élément actuel élément en même temps

6. Levez le doigt Au démarrage, utilisez la distance de glissement pour déterminer s'il faut passer à la page suivante

① Si la distance de déplacement ne dépasse pas 50% de la largeur de l'élément enfant, la page actuelle sera ramenée à la position initiale sans changer l'élément actuel.

②La distance de mouvement dépasse 50 % de la largeur de l'élément enfant, basculant l'élément actuel vers l'élément suivant.

③Définissez l'attribut de transformation de l'élément actuel sur Translate3d(0px, 0px, 0px) et définissez l'attribut z-index +1

④Définissez l'attribut de transformation de l'élément enfant suivant sur Translate3d (375px, 0px, 0px), et définissez l'attribut z-index +1

⑤Définissez l'attribut de transformation de l'élément enfant précédent sur translation3d(-375px, 0px, 0px), et définissez l'attribut z-index +1 1

⑥Définissez l'attribut z-index de tous les autres éléments enfants sur la valeur par défaut

7 L'élément précédent du premier élément enfant est le dernier élément et l'élément suivant de. le dernier élément L'élément est le premier élément, et cette étape est implémentée via une liste chaînée circulaire.

Lors du déplacement, l'attribut de transformation de l'élément enfant .item est défini, pas l'élément parent .carousel

Étapes de mise en œuvre

html&css

//html
<p class="carousel" ontouchstart="" >  
  <p class="item" style="background: #3b76c0" >    
    <h3 >item-1</h3>  
  </p>  
  <p class="item" style="background: #58c03b;">    
    <h3>item-2</h3>  
  </p>  
  <p class="item" style="background: #c03b25;">    
    <h3>item-3</h3>
  </p> 
  <p class="item" style="background: #e0a718;">  
    <h3>item-4</h3>  
  </p>  
  <p class="item" style="background: #c03eac;">    
    <h3>item-5</h3>  
  </p>
</p>

//css
.carousel{
  height: 50%;
  position: relative;
  overflow: hidden;
}
.item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

js

Définir l'état initial

Implémentez d'abord une liste chaînée bidirectionnelle pour conserver les éléments dans le composant carrousel.

function Node(data) {
    this.data = data;
    this.prev = null;
    this.next = null;
    this.index = -1;
}
//双向循环列表
function LinkList() {
    var _nodes = [];
    this.head = null;
    this.last = null;
    if (typeof this.append !== "function") {
        LinkList.prototype.append = function (node) {
            if (this.head == null) {
                this.head = node;
                this.last = this.head;
            }
            else {
                this.head.prev = node;
                this.last.next = node;
                node.prev = this.last;
                node.next = this.head;
                this.last = node;
            }
            node.index = _nodes.length; //务必在push前设置node.index
            _nodes.push(node);
        }
    }
}

Après avoir la liste chaînée, créez une instance de liste chaînée, ajoutez des éléments enfants à la liste chaînée et définissez certains états initiaux

var _container = document.querySelector("." + containerClass);
var _items = document.querySelectorAll("." + itemClass);
var list = loop ? new LinkList() : new SingleList();
for(var i = 0; i < _items.length; i++) {
  list.append(new Node(_items[i]));
}
var _prev = null;  //保存之前显示的元素
var _current = list.head;  //保存当前显示的元素，默认为第一个元素
var _normalZIndex = _current.data.style.zIndex;  //未显示元素的z-index值
var _activeZIndex = _normalZIndex + 1;  //当前显示元素的z-index值
var _itemWidth = _current.data.offsetWidth; //子元素宽度
positionItems(); //初始化元素位置
zindexItems(_current, _activeZIndex); //将当前元素及其左右元素的z-index加1

Lier les événements tactiles

événement touchstart

Lorsque le doigt est enfoncé, la position initiale est enregistrée

_container.addEventListener("touchstart", function(e) {
  // e.preventDefault();//取消此行代码的注释会在该元素内阻止页面纵向滚动
  var touch = e.touches[0];
  startX = touch.clientX;   //保存手指按下时的位置
  startY = touch.clientY;
  _container.style.webkitTransition = ""; //取消动画效果
  startT = new Date().getTime();          //记录手指按下的开始时间
  isMove = false;
  transitionItems(_prev, false);             //取消之前元素的过渡
  transitionItems(_current, false);          //取消当前元素的过渡
}, false);

événement touchmove

Le doigt glisse sur l'écran et la page bouge avec le doigt

_container.addEventListener("touchmove", function(e) {
    // e.preventDefault();//取消此行代码的注释会在该元素内阻止页面纵向滚动
    var touch = e.touches[0];
    var deltaX = touch.clientX - startX;  //计算手指在X方向滑动的距离
    var deltaY = touch.clientY - startY;  //计算手指在Y方向滑动的距离
    //如果X方向上的位移大于Y方向，则认为是左右滑动
    if (Math.abs(deltaX) > Math.abs(deltaY)){
        translate = deltaX > _itemWidth ? _itemWidth : deltaX;
        translate = deltaX < -_itemWidth ? -_itemWidth : deltaX;
        //同时移动当前元素及其左右元素
        moveItems(translate); 
        isMove = true;
    }
}, false);

événement touchend

Lorsque le doigt quitte l'écran , calculez sur quelle page il doit rester

_container.addEventListener("touchend",function(e) {
    // e.preventDefault();//取消此行代码的注释会在该元素内阻止页面纵向滚动
    //是否会滚
    var isRollback = false;
    //计算手指在屏幕上停留的时间
    var deltaT = new Date().getTime() - startT;
    if (isMove) { //发生了左右滑动
        //如果停留时间小于300ms,则认为是快速滑动，无论滑动距离是多少，都停留到下一页
        if(deltaT < 300){
            translate = translate < 0 ? -_itemWidth : _itemWidth;
        }else {
            //如果滑动距离小于屏幕的50%，则退回到上一页
            if (Math.abs(translate) / _itemWidth < 0.5){
                isRollback = true;
            }else{
                //如果滑动距离大于屏幕的50%，则滑动到下一页
                translate = translate < 0 ? -_itemWidth : _itemWidth;
            }
        }
        moveTo(translate, isRollback);
    }
}, false);

Bibliothèque carrousel

Pour faciliter l'utilisation, j'ai encapsulé l'ensemble du processus de mise en œuvre dans une bibliothèque et ajouté le méthodes prev(), next(), utilisant des méthodes très simples :

<script src="lib/carousel.js"></script>
CreateCarousel("carousel", "item", true)
  .bindTouchEvent()
  .setItemChangedHandler(onPageChanged);
//参数"carousel"为容器的类名
//参数"item"为子元素的类名
//第三个参数设置是否需要循环播放，true为循环播放

Je pense que vous maîtrisez la méthode après avoir lu le cas présenté dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur. le site PHP chinois !

Lecture recommandée :

zepto réalise un défilement transparent de haut en bas sur le terminal mobile

Quelles sont les méthodes pour H5 vérification du formulaire

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!