Heim > Artikel > Web-Frontend > Wie schreibe ich CSS-Bildlaufcode? Horizontal scrollende Anzeige von Karussellbildern

Wie schreibe ich CSS-Bildlaufcode? Horizontal scrollende Anzeige von Karussellbildern

藏色散人Original: 2018-08-06 10:14:5615344Durchsuche

Die Anzeige von Karussellbildern auf Webseiten ist für die tägliche Arbeit unerlässlich. Daher ist die Einführung in den CSS-Bildlaufcode in diesem Artikel für Anfänger, die gerade erst anfangen, noch einfacher zu verstehen. Ich hoffe, dieser Artikel ist für alle hilfreich.

Das CSS-Bildlaufcode-Beispiel lautet wie folgt:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css图片滚动代码示例</title>
</head>
<body>
<style>
    .imglist{
        overflow-x: auto;
        overflow-y: hidden;
        height:180px;
        white-space: nowrap;}
    img{
        width:auto;
        height:100%;
        margin-right:10px;
    }
</style>
<div class="imglist">
    <img  src="img/1.png"/ alt="Wie schreibe ich CSS-Bildlaufcode? Horizontal scrollende Anzeige von Karussellbildern" >
    <img  src="img/2.png"/ alt="Wie schreibe ich CSS-Bildlaufcode? Horizontal scrollende Anzeige von Karussellbildern" >
    <img  src="img/3.png"/ alt="Wie schreibe ich CSS-Bildlaufcode? Horizontal scrollende Anzeige von Karussellbildern" >
    <img  src="img/4.png"/ alt="Wie schreibe ich CSS-Bildlaufcode? Horizontal scrollende Anzeige von Karussellbildern" >
    <img  src="img/5.png"/ alt="Wie schreibe ich CSS-Bildlaufcode? Horizontal scrollende Anzeige von Karussellbildern" >
</div>
</body>
</html>

Hinweis: In HTML hat das -Tag kein schließendes Tag und nicht möglich. Für den linken Floating-Bereich muss der äußere Container ohne Zeilenumbrüche hinzugefügt werden. Das -Tag fügt kein Bild in die Webseite ein, sondern verlinkt das Bild von der Webseite und erstellt so einen Platzhalter für das referenzierte Bild.

white-space: nowrap;

Wie schreibe ich CSS-Bildlaufcode? Horizontal scrollende Anzeige von Karussellbildern

[Empfehlungen für verwandte Artikel]

So implementieren Sie $.fn- und Bildlaufeffekte in jquery

Ausführliche Erklärung, wie man einen benutzerdefinierten CSS3-Bildlaufleistenstil schreibt

Ein Beispiel zur Erläuterung von CSS3, um nahtloses Scrollen in Endlosschleife zu erreichen

Kein Bild-Seam-Scroll-Plug-In-Code für nahtloses Scrollen von Bildern nach oben, unten, links und rechts

Javascript, um den Scrolleffekt von Bildern nach links und rechts zu erzielen [kann automatisch scrollen, mit linken und rechten Tasten]

[Verwandte Video-Tutorials empfohlen]

Image tag-2016 neues Lehrplansystem HTML+CSS-Video

Das obige ist der detaillierte Inhalt vonWie schreibe ich CSS-Bildlaufcode? Horizontal scrollende Anzeige von Karussellbildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery css css3 html 循环

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was ist ein Formatierungskontext auf Blockebene? Die Rolle der Erstellung eines Formatierungskontexts auf Blockebene (Code angehängt)Nächster Artikel：Was ist ein Formatierungskontext auf Blockebene? Die Rolle der Erstellung eines Formatierungskontexts auf Blockebene (Code angehängt)

In Verbindung stehende Artikel

Mehr sehen