Es wurde ein einfaches Weblayout implementiert, das fünf verschiedene Felder enthält, jedes mit einem anderen Hintergrundbild und etwas Abstand dazwischen. Wenn Sie mit der Maus über ein Feld fahren, wird dessen Hintergrundbild abgeblendet und der Text weiß. Die Kästchen und Schaltflächen werden in einem Container platziert und die gesamte Seite sieht aus wie eine Galerie.
<div class="container">
<div id="slide">
<div class="item" style="background-image:url('./img/Zhang Ruonan01.jpg')"></div>
<div class="item" style="background-image:url('./img/Ju Jingyi01.jpg')"></div>
<div class="item" style="background-image:url('./img/Ju Jingyi02.jpg')"></div>
<div class="item" style="background-image:url('./img/Ju Jingyi06.jpg')"></div>
<div class="item" style="background-image:url('./img/Ju Jingyi04.jpg')"></div>
<div class="item" style="background-image:url('./img/Ju Jingyi07.jpg')"></div>
</div>
<div class="buttons">
<div class="left">
< Zurück</div>
<div class="center">Hintergrundbild herunterladen</div>
<div class="right">Weiter ></div>
</div>
</div>
</div> * {
Rand: 0;
Polsterung: 0;
Boxgröße: border-box;
}
.container {
Breite: 100vw;
Höhe: 100 Vh;
Position: relativ;
Überlauf: versteckt;
}
.Artikel {
Breite: 240px;
Höhe: 160px;
Position: absolut;
oben: 50 %;
links: 0;
transform: TranslateY(-50%);
Randradius: 10px;
Kastenschatten: 0 30px 50px #505050;
Hintergrundgröße: Cover;
Hintergrundposition: Mitte;
Übergang: 1s;
}
.item:nth-child(1),
.item:nth-child(2) {
links: 0;
oben: 0;
Breite: 100 %;
Höhe: 100 %;
transform: TranslateY(0);
Kastenschatten: keiner;
Randradius: 0;
}
.item:nth-child(3) {
links: 70 %;
}
.item:nth-child(4) {
links: calc(70% + 250px);
}
.item:nth-child(5) {
links: calc(70% + 500px);
}
.item:nth-child(n+6) {
links: calc(70% + 750px);
Deckkraft: 0;
}
.buttons {
Breite: 100 %;
Position: absolut;
unten: 50px;
Rand links: -50px;
Textausrichtung: Mitte;
Anzeige: Flex;
rechtfertigen-Inhalt: Mitte;
}
.buttons div {
Breite: 120px;
Höhe: 50px;
Zeilenhöhe: 50px;
Textausrichtung: Mitte;
Randradius: 5px;
Rand: 0 25px;
Übergang: .5s;
Cursor: Zeiger;
Benutzerauswahl: keine;
Schriftgröße: 20px;
Farbe: #fff;
Hintergrundfarbe: rgba(0, 0, 0, 0,4);
Box-Shadow: 2px 2px 2px rgba(0, 0, 0, 0,2);
} const leftBtn = document.querySelector(".buttons .left")
const rightBtn = document.querySelector(".buttons .right")
const slide = document.querySelector("#slide")
let openClick = true // Verarbeitung drosseln (um sicherzustellen, dass während des Animationsausführungsprozesses nicht wiederholt auf die Schaltfläche geklickt wird)
leftBtn.addEventListener("click", () => {
if (openClick) {
openClick = false // Nach dem Auslösen des Klicks die Schaltfläche deaktivieren const items = document.querySelectorAll(".item")
slide.prepend(items[items.length - 1])
setTimeout(() => openClick = true, 1000) // 1s, um den Button erneut zu öffnen}
})
rightBtn.addEventListener("click", () => {
if (openClick) {
openClick = false
const items = document.querySelectorAll(".item")
slide.appendChild(items[0])
setTimeout(() => openClick = true, 1000)
}
}) * {
Rand: 0;
Polsterung: 0;
Boxgröße: border-box;
}Dieser Code legt den globalen CSS-Stil fest, einschließlich der Festlegung des Box-Modells des Elements auf „Border-Box“, d. h. die Breite und Höhe des Box-Modells umfassen den Rand und die Polsterung des Elements und nicht nur den Inhalt des Elements.
.container {
Breite: 100vw;
Höhe: 100 Vh;
Position: relativ;
Überlauf: versteckt;
}Dieser Code legt den CSS-Stil des Containers fest, einschließlich der Festlegung der Breite und Höhe des Containers auf 100vw und 100vh, was der Breite und Höhe des Ansichtsfensters entspricht. Stellen Sie gleichzeitig die Positionierung des Containers auf relative Positionierung ein, dh auf Positionierung relativ zu seinem übergeordneten Element. Setzen Sie abschließend die Überlaufeigenschaft des Containers auf ausgeblendet, d. h. Elemente, die den Bereich des Containers überschreiten, werden nicht angezeigt.
.Artikel {
Breite: 240px;
Höhe: 160px;
Position: absolut;
oben: 50 %;
links: 0;
transform: TranslateY(-50%);
Randradius: 10px;
Kastenschatten: 0 30px 50px #505050;
Hintergrundgröße: Cover;
Hintergrundposition: Mitte;
Übergang: 1s;
}Dieser Code legt den CSS-Stil der Box fest, einschließlich der Festlegung der Breite und Höhe der Box auf 240 Pixel und 160 Pixel, was der Größe der Box entspricht. Stellen Sie gleichzeitig die Positionierung des Felds auf absolute Positionierung ein, dh auf Positionierung relativ zu seinem übergeordneten Element. Stellen Sie abschließend den Randradius der Box auf 10 Pixel ein, was der abgerundeten Ecke der Box entspricht. Die Hintergrundbildgröße der Box ist „Cover“, die die gesamte Box abdeckt. Das Hintergrundbild ist zentriert. Stellen Sie abschließend den Übergangseffekt der Box auf 1 Sekunde ein, dh die Übergangseffektzeit beträgt 1 Sekunde.
.item:nth-child(1),
.item:nth-child(2) {
links: 0;
oben: 0;
Breite: 100 %;
Höhe: 100 %;
transform: TranslateY(0);
Kastenschatten: keiner;
Randradius: 0;
}Dieser Code legt die CSS-Stile für das erste und das zweite Feld fest, einschließlich der Festlegung ihrer Positionen auf 0, was bedeutet, dass sie den oberen Rand des Containers abdecken. Stellen Sie außerdem ihre Höhe auf 100 % ein, was bedeutet, dass sie die gesamte Höhe des Behälters abdecken. Setzen Sie abschließend ihre Transformationseigenschaften auf translatorY(0), was bedeutet, dass sie nicht nach unten verschoben werden. Setzen Sie außerdem ihren Schatten- und Randradius auf 0, d. h. sie haben keinen Schatten und keinen Rand.
.item:nth-child(3) {
links: 70 %;
}Dieser Code legt den CSS-Stil des dritten Felds fest, einschließlich der Festlegung seiner Position auf 70 % von der linken Seite des Containers.
.item:nth-child(4) {
links: calc(70% + 250px);
}Dieser Code legt den CSS-Stil des vierten Felds fest, einschließlich der Festlegung seiner Position auf 250 Pixel von der rechten Seite des dritten Felds.
.item:nth-child(5) {
links: calc(70% + 500px);
}Dieser Code legt den CSS-Stil des fünften Felds fest, einschließlich der Festlegung seiner Position auf 500 Pixel von der rechten Seite des dritten Felds.
.item:nth-child(n+6) {
links: calc(70% + 750px);
Deckkraft: 0;
}Dieser Code legt die CSS-Stile für alle Boxen fest, einschließlich der Festlegung ihrer Position auf 750 Pixel von der rechten Seite der dritten Box. Setzen Sie außerdem ihre Deckkraft auf 0, d. h. sie sind unsichtbar.
.buttons {
Breite: 100 %;
Position: absolut;
unten: 50px;
Rand links: -50px;
Textausrichtung: Mitte;
Anzeige: Flex;
rechtfertigen-Inhalt: Mitte;
}Dieser Code dient zum Festlegen des CSS-Stils der Schaltfläche, einschließlich der Festlegung der Breite der Schaltfläche auf 100 %, was bedeutet, dass die Größe der Schaltfläche mit der des Containers übereinstimmt. Stellen Sie gleichzeitig die Position der Schaltfläche auf 50 Pixel vom unteren Rand des Containers ein. Stellen Sie abschließend die Ausrichtung der Schaltfläche auf „Mitte“ ein, was bedeutet, dass die Schaltfläche horizontal zentriert ist.
.buttons div {
Breite: 120px;
Höhe: 50px;
Zeilenhöhe: 50px;
Textausrichtung: Mitte;
Randradius: 5px;
Rand: 0 25px;
Übergang: .5s;
Cursor: Zeiger;
Benutzerauswahl: keine;
Schriftgröße: 20px;
Farbe: #fff;
Hintergrundfarbe: rgba(0, 0, 0, 0,4);
Box-Shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}Mit diesem Code wird der CSS-Stil der Schaltfläche festgelegt, einschließlich der Festlegung der Breite der Schaltfläche auf 120 Pixel und der Höhe auf 50 Pixel, was der Größe der Schaltfläche entspricht. Stellen Sie gleichzeitig die Zeilenhöhe der Schaltfläche auf 50 Pixel ein, was der Höhe der Schaltfläche entspricht. Die Textausrichtung der Schaltfläche ist zentriert, d. h. der Text ist horizontal zentriert. Der Randradius der Schaltfläche beträgt 5 Pixel, was den abgerundeten Ecken der Schaltfläche entspricht. Der Rand der Schaltfläche beträgt 0 25 Pixel, dh der Abstand zwischen der linken und rechten Seite der Schaltfläche in horizontaler Richtung beträgt 25 Pixel. Der Übergangseffekt der Taste beträgt 0,5 Sekunden, d. h. die Übergangseffektzeit beträgt 0,5 Sekunden. Das Cursorattribut der Schaltfläche ist der Zeiger. Wenn sich die Maus über die Schaltfläche bewegt, ändert sich die Form der Maus in die Form einer Hand. Das Benutzerauswahlattribut der Schaltfläche ist „none“, d. h. der Benutzer kann den Text in der Schaltfläche nicht auswählen. Die Schriftgröße der Schaltfläche beträgt 20 Pixel, was der Textgröße der Schaltfläche entspricht. Die Textfarbe der Schaltfläche ist Weiß, was der Textfarbe der Schaltfläche entspricht. Die Hintergrundfarbe der Schaltfläche ist RGBA (0, 0, 0, 0,4), dh die Hintergrundfarbe der Schaltfläche ist schwarz und die Transparenz beträgt 0,4. Die Schatteneigenschaft der Schaltfläche ist 2px 2px 2px rgba(0, 0, 0, 0,2), das heißt, der Schatten der Schaltfläche ist 2px 2px 2px schwarz und die Transparenz beträgt 0,2.
Damit ist dieser Artikel über den Beispielcode des HTML+CSS-Panoramakarussells abgeschlossen. Weitere verwandte HTML-CSS-Panoramakarussellinhalte finden Sie in den vorherigen Artikeln auf downcodes.com. Ich hoffe, Sie alle unterstützen downcodes.com mehr in der Zukunft!