Ein Beispiel-Tutorial zur Implementierung eines Karussells (Touchscreen-Version) mit H5

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

1. Unterstützt kreisförmiges Gleiten

2. Die Breite kann beliebig eingestellt werden und muss nicht die gleiche Breite wie der Bildschirm haben

3. Die Seite kann vertikal gescrollt werden

4. Rückrufüberwachungselemente können so eingestellt werden, dass sie umgeschaltet werden

5. Reines js, ohne Bibliotheken von Drittanbietern

Prinzip

1. Untergeordnete Elemente übernehmen.item Das width beträgt 375 Pixel. Verwenden Sie die absolute Positionierung, um alle untergeordneten Elemente innerhalb des übergeordneten Elements zu platzieren

2. Stellen Sie .carousel des übergeordneten Elements width auf 375 Pixel und .item des untergeordneten Elements auf die gleiche Breite ein.

3. Fügen Sie Berührungsereignisse für das übergeordnete Element .carousel hinzu: touchstart, touchmove, touchend

4. Fingerdruck Wenn der Finger gleitet, wird die Anfangsposition (clientX) gespeichert. Schieben Sie Ihren Finger nach links, um das aktuelle Element zu verschieben und das Element rechts vom aktuellen Element gleichzeitig

5. Schieben Sie Ihren Finger nach rechts, um das aktuelle Element und das Element links vom aktuellen Element zu verschieben

1. Wenn der Finger angehoben wird, wird anhand der Gleitstrecke bestimmt, ob zur nächsten Seite gewechselt werden soll

2. Die Der Bewegungsabstand überschreitet nicht 50 % der Breite des untergeordneten Elements. Rollen Sie die aktuelle Seite an ihre ursprüngliche Position zurück, ohne das aktuelle Element zu wechseln.

6. Die Bewegungsdistanz überschreitet 50 % der Breite des untergeordneten Elements, wodurch das aktuelle Element zum nächsten Element wechselt.

1. setzt das

   -Attribut des aktuellen Elements auf

   und setzt das
-Attribut +1.
setzt das nächste child Setzt das
3. -Attribut des Elements auf

   und setzt das transform-Attribut +1translate3d(0px, 0px, 0px)z-index

Setzt das
4. -Attribut des vorherigen untergeordneten Elements auf

   und legt Attribut +1transformtranslate3d(375px, 0px, 0px)z-index

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

5. transformtranslate3d(-375px, 0px, 0px)z-indexDas erste Das vorherige Element des untergeordneten Elements ist das letzte Element und das nächste Element des letzten Elements ist das erste Element. Dieser Schritt wird durch eine zirkulär verknüpfte Liste implementiert.

6. z-indexBeim Verschieben wird das Transformationsattribut des untergeordneten Elements .item gesetzt, nicht das übergeordnete Element

7. Implementierungsschritte
   html&css

js

.carouselLegen Sie den Anfangszustand fest

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

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

//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%;
}

Berührungsereignisse binden

Touchstart-Ereignis

Wenn der Finger gedrückt wird, wird die Anfangsposition gespeichert

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

Touchmove-Ereignis

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

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

Touchend-Ereignis

Wenn der Finger den Bildschirm verlässt, berechnen Sie, auf welcher Seite er landen muss

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

Karussellbibliothek

Aus Gründen der Benutzerfreundlichkeit werde ich den gesamten Implementierungsprozess abschließen. Es ist in einer Bibliothek gekapselt und fügt

und

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

Methoden hinzu. Es ist sehr einfach zu verwenden:

Die Bibliothek kann von Github heruntergeladen werden

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

Referenz

H5-Einzelseiten-Gesten-Schiebebildschirm-Umschaltprinzip

prev()Gute Nacht! next()

[Verwandte Empfehlungen]

<script src="lib/carousel.js"></script>

CreateCarousel("carousel", "item", true)
  .bindTouchEvent()
  .setItemChangedHandler(onPageChanged);

//参数"carousel"为容器的类名
//参数"item"为子元素的类名
//第三个参数设置是否需要循环播放，true为循环播放

1.

Kostenloses h5-Online-Video-Tutorial

2.

HTML5-Vollversionshandbuch

3.

php.cn Original-HTML5-Video-Tutorial

Das obige ist der detaillierte Inhalt vonEin Beispiel-Tutorial zur Implementierung eines Karussells (Touchscreen-Version) mit H5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!