Heim > Artikel > Web-Frontend > Ausführliche Erklärung, wie man natives JS verwendet, um einen mobilen Web-Karusselleffekt zu erzielen
Ausführliche Erklärung, wie man natives JS verwendet, um einen mobilen Web-Karusselleffekt zu erzielen
- 巴扎黑Original
- 2017-09-11 09:26:412483Durchsuche
Bei der mobilen Entwicklung sind Karussellbilder unverzichtbar. Der folgende Artikel führt Sie hauptsächlich in die relevanten Informationen zur Verwendung von reinem JS zur Realisierung mobiler Webkarussellbilder ein. Das Wichtigste ist, den Tween-Algorithmus zu kombinieren Beispielcode in diesem Artikel. Freunde in Not können sich darauf beziehen.
Vorwort
Ich glaube, jeder sollte wissen, dass Karussellbilder auf mobilen Endgeräten unsere häufigsten Bedürfnisse sind und dass wir sie am schnellsten umsetzen können Oft wird ein Code von Drittanbietern wie Swiper verwendet, aber wenn ich auf kompliziertere Rotationskarten stoße, weiß ich oft nicht, wie ich sie an verschiedene komplexe und sich ändernde Anforderungen anpassen kann Wenn der Code, den Sie schreiben, Fehler enthält, können Sie diese leicht beheben.
1. Anforderungen an Karussellbilder Passen Sie sich an Bildschirme mit unterschiedlichen Breiten/Dpr an
2. Es müssen berührungsbezogene Ereignisse verwendet werden
3. Verschiedene Modelle unterstützen möglicherweise Berührungsereignisse unterschiedlich
4. Bewegen Sie Ihren Finger einen Teil des Distanz im Bild, und die verbleibende Distanz muss automatisch zurückgelegt werden
5. Die automatische Fertigstellung der Distanz erfordert eine einfache Zeitkurve
- Legen Sie Ihren Finger auf das Bild und bewegen Sie Ihren Finger nach links oder nach rechts, und das Bild bewegt sich entsprechend;
- Wenn sich der Finger eine kleine Strecke bewegt, kehrt das Bild automatisch zu seiner Position zurück; Nächstes Bild;
- Wenn Sie Ihren Finger schnell nach links oder rechts bewegen, wechselt er zum nächsten Bild;
- Das Bilderkarussell Ist eine Endlosschleife, müssen wir die Methode 3 1 2 3 1 verwenden, um N + 2 Bilder zu erreichen, um das Endlosschleifenkarussell von N Bildern zu realisieren
1. Fingerberührungsereignisse können durch 3 Ereignisse realisiert werden: touchstart touchmove touchend
2. Wenn der Finger berührt, müssen wir die x-Koordinate des Fingers aufzeichnen. Sie können das pageX-Attribut von touch verwenden und zu diesem Zeitpunkt
3. Wenn der Finger touchesmove, wir müssen auch pageX aufzeichnen und die kumulative zurückgelegte Strecke aufzeichnen
5. Bestimmen Sie die Bewegungsrichtung, indem Sie die Bewegungsstrecke in x-Richtung vergleichen und beurteilen, ob der Benutzer zum nächsten Bild wechseln soll basierend auf der Zeit nach links oder rechts gewischt
6. Das Verschieben von Bildern kann mit translator3d realisiert werden, indem die Hardwarebeschleunigung aktiviert wird
7. Für das Verschieben über eine bestimmte Distanz ist der EaseOut-Effekt erforderlich Wir können den EaseOut im Tween-Algorithmus verwenden, um die Entfernung zu erkennen, die wir jedes Mal zurücklegen. Natürlich können wir auch js verwenden Übergangsanimation festlegen
Kopfstil
HTML-Struktur
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=.5,maximum-scale=.5">
<title>移动端轮播图</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0
}
.banner {
overflow: hidden;
width: 100%;
height: 300px
}
.banner .img-wrap {
position: relative;
height: 100%
}
.banner img {
display: block;
position: absolute;
top: 0;
width: 100%;
height: 100%
}
</style>
</head>JS-Code 1. EasyOut animierte Bewegung,
<p class="banner"> <p class="img-wrap" id="imgWrap"> <img src="images/banner_3.jpg" data-index="-1"> <img src="images/banner_1.jpg" data-index="0"> <img src="images/banner_2.jpg" data-index="1"> <img src="images/banner_3.jpg" data-index="2"> <img src="images/banner_1.jpg" data-index="3"> </p> </p>
Berührungsereignisteil
<script>
HTMLElement.prototype.tweenTranslateXAnimate = function (start, end, callback) {
var duration = 50;
var t = 0;
var vv = end - start;
var Tween = {
Quad: {
easeOut: function (t, b, c, d) {
return -c * (t /= d) * (t - 2) + b;
}
}
};
this.timer = setInterval(function () {
var dis = start + Tween.Quad.easeOut(++t, 0, vv, duration);
this.style.transform = 'translate3d(' + dis + 'px, 0, 0)';
if (vv > 0 && parseInt(this.style.transform.slice(12)) >= end) {
this.style.transform = 'translate3d(' + parseInt(dis) + 'px, 0, 0)';
clearInterval(this.timer);
callback && callback();
}
if (vv < 0 && parseInt(this.style.transform.slice(12)) <= end) {
this.style.transform = 'translate3d(' + parseInt(dis) + 'px, 0, 0)';
clearInterval(this.timer);
callback && callback();
}
}.bind(this), 4);
}
</script>Der kritischste Parameter im Berührungsereignis ist der pageX-Parameter, der aufzeichnet Die Position von Für uns zur Verwendung in realen Projekten.
Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie man natives JS verwendet, um einen mobilen Web-Karusselleffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!