Ausführliche Erläuterung des Swipe-Beispiels für das mobile H5-Karussell-Plug-in

swipe.js ist eine leichte JS-Touch-Sliding-Bibliothek – Swipe JS. Dies ist eine sehr kleine Javascript-Klassenbibliothek, deren Funktion jedoch nicht einfach ist. Sie kann zum Anzeigen beliebiger Inhalte auf der Webseite verwendet werden, unterstützt präzise Touch-Bewegungsvorgänge und kann auch automatische Wiedergabe, proportionale Skalierung usw. einrichten. Praktische Funktionen .

Auf mobilen H5-Seiten benötigen wir häufig Karussellbilder. Wenn Sie nicht zu viele Effekte benötigen, sondern nur einfache Fingerbewegungen und automatische Rotationseffekte, bevorzuge ich das Swipe-Plug-In, aber Baidu The Die Suche nach diesem Plug-in ist noch nicht abgeschlossen. Ich werde die Funktionen hinzufügen, die Sie möglicherweise benötigen.

Einführung in die Swipe-Funktion

Im Folgenden wird die Verwendung von Swipe JS vorgestellt. Swipe hat die folgenden Parameter:

startSlide: 4,  //起始图片切换的索引位置
auto: 3000, //设置自动切换时间，单位毫秒
continuous: true,  //无限循环的图片切换效果
disableScroll: true,  //阻止由于触摸而滚动屏幕
stopPropagation: false,  //停止滑动事件
callback: function(index, element) {},  //回调函数，切换时触发
transitionEnd: function(index, element) {}  //回调函数，切换结束调用该函数。

Darüber hinaus gibt es einige der gebräuchlichsten Verwendete API-Methoden, wie zum Beispiel:

prev()：上一页
next()：下一页
getPos()：获取当前页的索引
getNumSlides()：获取所有项的个数
slide(index, duration)：滑动方法

Verwendung von Swipe

Nachdem wir die grundlegenden Funktionsmethoden verstanden haben, schauen wir uns an, wie man sie verwendet.

Zuerst die HTML-Struktur:

<p id="slider" class="swipe">
  <p class="swipe-wrap">
    <p></p>
    <p></p>
    <p></p>
  </p>
</p>

Dann der Stilcode:

.swipe {
    overflow: hidden;
    visibility: hidden;
    position: relative;
}
.swipe-wrap {
    overflow: hidden;
    position: relative;
}
.swipe-wrap > figure {
    float: left;
    width: 100%;
    position: relative;
}

Zuletzt die JS-Bindung und Parametereinstellungen festlegen:

var slider = Swipe(document.getElementById('slider'), {
   …………
   …………
});

Solange die oben eingeführten Funktionsparameter darin geschrieben sind, können die entsprechenden Funktionen realisiert werden.

Schließlich können wir dem Schiebeschalter auch Auf- und Ab-Tasten hinzufügen:

<button onclick="Swipe.prev()">prev</button>
<button onclick="Swipe.next()">next</button>

Zusätzlich füge ich einige Paginator-Effekte hinzu:

Wenn Sie den Effekt benötigen des Paginierens an dieser Stelle Wenn ja, können Sie den Code wie folgt hinzufügen:

Der Navigations-Tag-Teil ist der relevante Teil des Paginators, und es gibt so viele Li-Tags wie Folien (falls Sie das benötigen). Paginator-Effekt, fügen Sie einfach ein Nav- und ein UL-Tag hinzu, da das Li-Tag, das den Paging-Punkt darstellt, dynamisch generiert werden muss, wenn Sie das Karussellmodul dynamisch hinzufügen!)

<nav>
    <ul id="position">
      <!-- <li class="on"></li>
      <li class=""></li>
      <li class=""></li>
      <li class=""></li> -->
    </ul>
</nav>

---

Der entsprechende Instanziierungscode (Kinderschuhe mit einer einfacheren Schreibmethode können ihre eigene Methode verwenden):

var slider = Swipe(document.getElementById('slider'), {
                    auto: 3000,
                    continuous: true,
                    callback: function(pos) {
                        var i = bullets.length;
                        while (i--) {
                            bullets[i].className = ' ';
                        }
                        bullets[pos].className = 'on';
                    }
                });
var slides = document.querySelectorAll('.swipe-wrap figure').length;
var liBox = document.getElementById('position');
var liTab;
for (var i = 0; i < slides; i++) {
    liTab = document.createElement('li');
    if (i == 0) {
        liTab.className = 'on';
    }
    liBox.appendChild(liTab);
};
var bullets = document.getElementById('position').getElementsByTagName('li');

Es gibt einen weiteren wichtigen Punkt: Dieses Plug-in stoppt, nachdem Sie Ihren Finger einmal über das Folienmodul geschoben haben Automatisch rotieren. Zu diesem Zeitpunkt müssen Sie zu swipe.js gehen. Ändern Sie den Quellcode:

Damit dieses Plug-In grundsätzlich normal ausgeführt werden kann und Ihre grundlegendsten Anforderungen erfüllt.

Verwandte Empfehlungen:

Verwendung von Swiper auf dem mobilen Endgerät

Detaillierte Erläuterung der Vue Swiper-Implementierung der Komponentenentwicklung

Einführung in die Verwendung von Swiper in JS

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des Swipe-Beispiels für das mobile H5-Karussell-Plug-in. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!