Beispielcode zur Implementierung von horizontalem Endlos-Scrollen mit reinem CSS3

Beispielcode zur Implementierung von horizontalem Endlos-Scrollen mit reinem CSS3

Die Beispiele in diesem Artikel sind alle in kleinen Programmen geschrieben, dies hat jedoch keinen Einfluss auf die umzusetzenden Funktionen.

wxml

Machen Sie eine weitere Kopie der Box mit dem Bild, so dass Anfang und Ende des geloopten Bildes verbunden sind

<Ansichtsklasse="scrollbox dis-flex">
    <view class="imgItem dis-flex" style="animation: {{computedAni}};">
      <image src="../img/{{index + 1}}.jpg" wx:for="{{images}}" mode="aspectFill" wx:key="index"></image>
    </Ansicht>
    <view class="imgItem dis-flex" style="animation: {{computedAni}};">
      <image src="../img/{{index + 1}}.jpg" wx:for="{{images}}" mode="aspectFill" wx:key="index"></image>
    </Ansicht>
</Ansicht>

wxss

.dis-flex {
  Anzeige: Flex;
  Anzeige: -webkit-flex;
}
.scrollbox {
  Rand: 30px;
  Textausrichtung: zentriert;
  Rand: 1px durchgehend blau;
  Höhe: 220rpx;
  Elemente ausrichten: zentrieren;
  Überlauf: versteckt;
}
.imgItem {
  Animation: 24 s, lineares Aufwärtsrowdown, unendlich, normal;
}
.imgItem-Bild {
  Breite: 200rpx;
  Höhe: 200rpx;
  Rand: 0 20 rpx;
}
@keyframes Zeile nach oben {
  0% {
      -webkit-transform: übersetzen3d(0, 0, 0);
      transformieren: übersetzen3d(0, 0, 0);
  }
  100 % {
      -webkit-transform: translate3d(-100%, 0, 0);
      transformieren: übersetzen3d(-100 %, 0, 0);
  }
}
@-webkit-keyframes rowup {
  0% {
      -webkit-transform: übersetzen3d(0, 0, 0);
      transformieren: übersetzen3d(0, 0, 0);
  }
  100 % {
    -webkit-transform: übersetzen3d(-1000px, 0, 0);
    transformieren: übersetzen3d(-1000px, 0, 0);
  }
}

js

Der Schlüssel zur Anpassung der Geschwindigkeit besteht darin, dass die Animationszeit dynamisch durch die Anzahl der geloopten Elemente gesteuert wird.

Seite({
  Daten: {
    Bilder: neues Array(4),
    berechneteAni: ''
  },
  beim Laden: Funktion () {
    dies.setAniSpeed(diese.Daten.Bilder.Länge)
  },
  setAniSpeed(num) {
    let time = Math.ceil(num / 5 * 15) // Hier beträgt die Animationszeit 15 Sekunden, wenn 5 Bilder vorhanden sind. Sie können dies selbst anpassen this.setData({
      computedAni: `${time}s rowup linear infinite normal`
    })
  }
})

Klicken Sie hier, um den Codeausschnitt anzuzeigen

https://developers.weixin.qq.com/s/4gGngEm67Zlh

Damit ist dieser Artikel über den Beispielcode zur Implementierung von horizontalem Endlos-Scrollen mit reinem CSS3 abgeschlossen. Weitere relevante CSS3-Inhalte zum horizontalen Endlos-Scrollen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<:  So verwenden Sie Docker zum Erstellen einer Entwicklungsumgebung (Windows und Mac)

>>:  So verwenden Sie das href-Attribut des HTML-Tags a, um relative und absolute Pfade anzugeben

Artikel empfehlen

Linux entfernt node.js vollständig und installiert es über den Befehl yum neu

erster Schritt Einmaliges Löschen mit der integri...

Erklärung der Rückgabe einer MySQL-Tabelle führt zur Ungültigkeit des Index

Einführung Wenn die MySQL InnoDB-Engine Datensätz...

Mysql teilt Zeichenfolge durch gespeicherte Prozedur in Array auf

Um einen String in ein Array aufzuteilen, müssen ...

So verwenden Sie Nginx, um einen RTMP-Liveserver auszuführen

Dieses Mal haben wir einen RTMP-Liveübertragungss...

So verwenden Sie JS zum Implementieren des Wasserfalllayouts von Webseiten

Inhaltsverzeichnis Vorwort: Was ist ein Wasserfal...

Zusammenfassung aller HTML-Interviewfragen

1. Die Rolle des Doctypes, der Unterschied zwisch...

JavaScript-Beispielcode zum Ermitteln, ob eine Datei vorhanden ist

1. Geschäftsszenario Ich habe kürzlich Entwicklun...

jQuery erzielt den Effekt einer Werbung, die nach oben und unten gescrollt wird

In diesem Artikel wird der spezifische Code von j...