H5 implementiert eine Touchscreen-Version des Karussells

Dieses Mal werde ich Ihnen H5 zur Implementierung der Touchscreen-Version des Karussells vorstellen. Was sind die Vorsichtsmaßnahmen für die Implementierung der H5-Touchscreen-Version des Karussells? ein Blick.

Ich bin neu im Frontend und möchte den Implementierungsprozess des Touchscreen-Karussells auf Mobiltelefonen teilen. Die allgemeinen Funktionen sind wie folgt:

Unterstützt kreisförmiges Schieben

2. Die Breite kann beliebig sein. Die Einstellungen müssen nicht mit der Breite des Bildschirms übereinstimmen.

3. Die Seite kann vertikal gescrollt werden.

4 um den Wechsel von Elementen zu überwachen

5. Reines js, ohne Drittanbieter-Bibliothek

Prinzip

1. Gehen Sie davon aus, dass die Breite des Unterelements .item 375 Pixel beträgt. Verwenden Sie absolute Positionierung, um alles zu verschieben. Platzieren Sie das untergeordnete Element innerhalb des übergeordneten Elements

. 2. Legen Sie die Breite des übergeordneten Elements fest element .carousel auf 375px, was der gleichen Breite wie das untergeordnete Element .item

3. Fügen Sie ein Touch-Ereignis zum übergeordneten Element .carousel hinzu: touchstart, touchmove, touchend

4 Wann Wenn der Finger gedrückt wird, speichern Sie die Ausgangsposition (clientX)

5 Wenn der Finger gleitet, wird die Gleitrichtung durch die Gleitstrecke bestimmt:

① Streichen Sie mit dem Finger nach links und Das aktuelle Element und das Element rechts vom aktuellen Element werden gleichzeitig verschoben

② Wischen Sie mit dem Finger nach rechts und Sie verschieben das aktuelle Element und das Element links vom aktuellen Element gleichzeitig

6. Heben Sie Ihren Finger. Beim Starten verwenden Sie die Schiebestrecke, um zu bestimmen, ob zur nächsten Seite gewechselt werden soll

① Wenn die Schiebestrecke 50 % der nicht überschreitet Breite des untergeordneten Elements, die aktuelle Seite wird auf die Ausgangsposition zurückgesetzt, ohne dass das aktuelle Element gewechselt wird.

②Der Bewegungsabstand überschreitet 50 % der Breite des untergeordneten Elements, wodurch das aktuelle Element zum nächsten Element wechselt.

③Setzen Sie das Transformationsattribut des aktuellen Elements auf translator3d(0px, 0px, 0px) und setzen Sie das Z-Index-Attribut auf +1

④Setzen Sie das Transformationsattribut des nächsten untergeordneten Elements auf translator3d (375px, 0px, 0px) und setzen Sie das Z-Index-Attribut +1

⑤Setzen Sie das Transformationsattribut des vorherigen untergeordneten Elements auf translator3d(-375px, 0px, 0px) und legen Sie das Z-Index-Attribut fest +1 1

⑥Setzen Sie das Z-Index-Attribut aller anderen untergeordneten Elemente auf den Standardwert

7 Das vorherige Element des ersten untergeordneten Elements ist das letzte Element und das nächste Element von das letzte Element Das Element ist das erste Element, und dieser Schritt wird durch eine zirkulär verknüpfte Liste implementiert.

Beim Verschieben wird das Transformationsattribut des untergeordneten Elements .item gesetzt, nicht des übergeordneten Elements .carousel

Implementierungsschritte

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

Anfangszustand festlegen

Implementieren Sie zunächst eine doppelt verknüpfte Liste, um die Elemente in der Karussellkomponente beizubehalten.

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);
        }
    }
}

Nachdem Sie die verknüpfte Liste haben, erstellen Sie eine verknüpfte Listeninstanz, fügen Sie untergeordnete Elemente zur verknüpften Liste hinzu und legen Sie einige Anfangszustände fest

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

Binden Sie Berührungsereignisse

Touchstart-Ereignis

Beim Drücken des Fingers wird die Anfangsposition gespeichert

_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);

Touchmove-Ereignis

Der Finger gleitet über den Bildschirm und die Seite bewegt sich mit dem Finger

_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);

Touchend-Ereignis

Wenn der Finger den Bildschirm verlässt , berechnen Sie, auf welcher Seite es bleiben muss

_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);

Karussellbibliothek

Zur Vereinfachung der Verwendung habe ich den gesamten Implementierungsprozess in einer Bibliothek gekapselt und die hinzugefügt prev(), next() Methoden, sehr einfach:

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln die chinesische PHP-Website!

Empfohlene Lektüre:

zepto realisiert nahtloses Auf- und Abscrollen auf dem mobilen Endgerät

Welche Methoden gibt es für H5 Formularüberprüfung

Das obige ist der detaillierte Inhalt vonH5 implementiert eine Touchscreen-Version des Karussells. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!