So implementieren Sie ein Bildkarussell mit reinem CSS

Implementierungsideen:

(empfohlenes Lernen: CSS-Schnellstart)

• Bereiten Sie dasselbe vor Größe Mehrere Bilder

• Ordnen Sie die anzuzeigenden Bilder horizontal in einem Bildcontainer an

• Fügen Sie außerhalb des Bildcontainers einen Anzeigecontainer hinzu, um den Container anzuzeigen Die Größe ist die Größe des Bildes

• Fügen Sie eine benutzerdefinierte Animation zum Bildcontainer hinzu und legen Sie inkrementelle Offset-Werte in verschiedenen Phasen der Animation fest

Hinweise:

• Der Animationseffekt ist in zwei Teile unterteilt: Umschalten und Bleiben

• Die benutzerdefinierte Animationsstufe hängt von der Anzahl ab Bilder

• Der Versatzwert jeder Phase der Animation hängt von der Bildgröße ab

• Es gibt keinen Umschalteffekt vom letzten Bild zum Das erste Bild im Beispiel in diesem Artikel ist, eins nach dem anderen vom letzten Bild zu wechseln

HTML-Code:

rrree

Code-Analyse:

Hier werden drei img-Elemente erstellt, außerhalb des img-Elements. Es handelt sich um einen Bildcontainer, und außerhalb des Bildcontainers befindet sich ein Anzeigecontainer.

CSS-Code:

<div id="container">
    <div id="photo">
        <img src="1.png" />
        <img src="2.png" />
        <img src="3.png" />
    </div>
</div>

Codeanalyse:

• Die Größe des Anzeigecontainers stimmt mit der Bildgröße überein

• Fügen Sie Float-Effekte zu Bildern hinzu, ohne sich um lästige Randprobleme kümmern zu müssen.

• Da das Beispiel nur drei Bilder enthält, werden drei Animationsstufen hinzugefügt, wobei jede Stufe durch Festlegen einer Erhöhung erreicht wird margin-left Der Wert erreicht den Effekt des Wechsels

• Der Animationsstufensatz (zum Beispiel: 35 % ~ 60 %) ist der Animationsverweilzeitteil und die Leerlaufzeit der vorherigen Stufe (z. B. 25 % ~ 35 %) beträgt. Wenn Sie Teile für eine Animation wechseln, müssen Sie die Länge jedes Teils selbst steuern

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein Bildkarussell mit reinem CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!