Reines HTML und CSS, um den JD-Karusselleffekt zu erzielen

Das JD-Karussell wurde mit reinem HTML und CSS implementiert, ohne dynamische Effekte hinzuzufügen und hauptsächlich unter Verwendung von Positionierungswissen.

, wie in der Abbildung gezeigt, sind zwei seitliche Pfeilbilder.

<!DOCTYPE html>
<html lang="de">
<Kopf> <Meta-Zeichensatz="UTF-8">
    <Titel>LunBo</Titel>
    <Stil>
        *{
            Polsterung: 0;
            Rand: 0;
        }
        li{
            Listenstil: keiner;
        }
        .lunbo{
            Rand: 40px automatisch;
            Höhe: 470px;
            Breite: 590px;
            Position: relativ;
        }
        .links rechts{
            Position: absolut;
            oben: 50 %;
            Rand oben: -18px;
            Breite: 24px;
            Höhe: 36px;
        }
        .links{
            links: 0;
        }
        .Rechts{
            rechts: 0;
        }
        .lunbo ul{
            Höhe: 18px;
            Breite: 151px;
            Hintergrund: rgba(255,255,255,.3);
            Position: absolut;
            unten: 10px;
            links: 50%;
            Rand links: -76px;
            Rahmenradius: 10px;
        }
        .lunbo li{
            Höhe: 14px;
            Breite: 14px;
            Randradius: 50 %;
            Hintergrundfarbe: #fff;
            schweben: links;
            Rand: 2px;
        }
        .lunbo .aktuell{
            Hintergrundfarbe: #f40;
        }
    </Stil>
</Kopf>
<Text>
    <div Klasse="lunbo">
        <img src="images/lunbo.jpg" alt="">
        <div class="left"><img src="images/left.png" alt=""></div>
        <!-- Sie können auch einen Link verwenden und dann den Hintergrund verwenden -->
        <div class="right"><img src="images/right.png" alt=""></div>
        <ul>
            <li Klasse="aktuell"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

Folgende Effekte wurden erzielt

Zusammenfassen

Das Obige ist reines HTML und CSS, um den vom Editor eingeführten JD-Karusselleffekt zu erzielen. Ich hoffe, es wird allen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!

<<: Die unangemessenen MaxIdleConns von MySQL führen zu kurzen Verbindungen

>>: Fünf praktische Tipps zur Gestaltung von Webformularen