Implementé un diseño web simple que contiene cinco cuadros diferentes, cada uno con una imagen de fondo diferente y algo de espacio entre ellos. Cuando pasa el cursor sobre un cuadro, su imagen de fondo se atenúa y el texto se vuelve blanco. Los cuadros y botones se colocan en un contenedor y toda la página parece una galería.
<div class="contenedor">
<div id="diapositiva">
<div class="item" style="fondo-imagen:url('./img/Zhang Ruonan01.jpg')"></div>
<div class="item" style="fondo-imagen:url('./img/Ju Jingyi01.jpg')"></div>
<div class="item" style="fondo-imagen:url('./img/Ju Jingyi02.jpg')"></div>
<div class="item" style="fondo-imagen:url('./img/Ju Jingyi06.jpg')"></div>
<div class="item" style="fondo-imagen:url('./img/Ju Jingyi04.jpg')"></div>
<div class="item" style="fondo-imagen:url('./img/Ju Jingyi07.jpg')"></div>
</div>
<div class="botones">
<div class="izquierda">
< Anterior</div>
<div class="center">Descargar fondo de pantalla</div>
<div class="right">Siguiente >></div>
</div>
</div>
</div> * {
margen: 0;
relleno: 0;
tamaño de caja: cuadro de borde;
}
.contenedor {
ancho: 100vw;
altura: 100vh;
posición: relativa;
desbordamiento: oculto;
}
.artículo {
ancho: 240 px;
altura: 160 píxeles;
posición: absoluta;
arriba: 50%;
izquierda: 0;
transformar: traducirY(-50%);
radio del borde: 10px;
sombra de cuadro: 0 30px 50px #505050;
tamaño de fondo: portada;
posición de fondo: centro;
transición: 1s;
}
.item:nésimo-niño(1),
.item:nésimo-niño(2) {
izquierda: 0;
arriba: 0;
ancho: 100%;
altura: 100%;
transformar: traducirY(0);
sombra de cuadro: ninguna;
radio de borde: 0;
}
.item:nésimo-niño(3) {
izquierda: 70%;
}
.item:nésimo-niño(4) {
izquierda: calc(70% + 250px);
}
.item:nésimo-niño(5) {
izquierda: calc(70% + 500px);
}
.item:nésimo-niño(n+6) {
izquierda: calc(70% + 750px);
opacidad: 0;
}
.botones {
ancho: 100%;
posición: absoluta;
abajo: 50px;
margen izquierdo: -50px;
alineación de texto: centro;
pantalla: flexible;
justificar-contenido: centro;
}
.botones div {
ancho: 120px;
altura: 50 píxeles;
altura de línea: 50 px;
alineación de texto: centro;
radio del borde: 5px;
margen: 0 25px;
transición: .5s;
cursor: puntero;
selección de usuario: ninguna;
tamaño de fuente: 20px;
color: #fff;
color de fondo: rgba(0, 0, 0, 0.4);
sombra de cuadro: 2px 2px 2px rgba(0, 0, 0, 0.2);
} const leftBtn = document.querySelector(".botones .left")
const rightBtn = document.querySelector(".botones .derecha")
diapositiva constante = document.querySelector("#diapositiva")
let openClick = true // Acelera el procesamiento (para garantizar que durante el proceso de ejecución de la animación, no se haga clic repetidamente en el botón)
leftBtn.addEventListener("hacer clic", () => {
si (abrirClic) {
openClick = false // Después de activar el clic, deshabilite el botón const items = document.querySelectorAll(".item")
slide.prepend(elementos[elementos.longitud - 1])
setTimeout(() => openClick = true, 1000) // 1s para abrir el botón nuevamente}
})
rightBtn.addEventListener("hacer clic", () => {
si (abrirClic) {
abrirClic = falso
elementos constantes = document.querySelectorAll(".item")
diapositiva.appendChild(elementos[0])
setTimeout(() => openClick = verdadero, 1000)
}
}) * {
margen: 0;
relleno: 0;
tamaño de caja: cuadro de borde;
}Este código establece el estilo CSS global, incluida la configuración del modelo de caja del elemento en border-box, es decir, el ancho y el alto del modelo de caja incluyen el borde y el relleno del elemento, en lugar de solo el contenido del elemento.
.contenedor {
ancho: 100vw;
altura: 100vh;
posición: relativa;
desbordamiento: oculto;
}Este código establece el estilo CSS del contenedor, incluida la configuración del ancho y alto del contenedor en 100vw y 100vh, que son el ancho y alto de la ventana gráfica. Al mismo tiempo, establezca el posicionamiento del contenedor en posicionamiento relativo, es decir, posicionamiento relativo a su elemento principal. Finalmente, establezca la propiedad de desbordamiento del contenedor en oculto, es decir, los elementos que excedan el alcance del contenedor no se mostrarán.
.artículo {
ancho: 240 px;
altura: 160 píxeles;
posición: absoluta;
arriba: 50%;
izquierda: 0;
transformar: traducirY(-50%);
radio del borde: 10px;
sombra de cuadro: 0 30px 50px #505050;
tamaño de fondo: portada;
posición de fondo: centro;
transición: 1s;
}Este código establece el estilo CSS del cuadro, incluida la configuración del ancho y alto del cuadro en 240 px y 160 px, que es el tamaño del cuadro. Al mismo tiempo, establezca el posicionamiento del cuadro en posicionamiento absoluto, es decir, posicionamiento relativo a su elemento principal. Finalmente, establezca el radio del borde del cuadro en 10px, que es la esquina redondeada del cuadro. El tamaño de la imagen de fondo de la caja es de portada, que cubre toda la caja. La imagen de fondo está centrada. Finalmente, configure el efecto de transición del cuadro en 1 segundo, es decir, el tiempo del efecto de transición es 1 segundo.
.item:nésimo-niño(1),
.item:nésimo-niño(2) {
izquierda: 0;
arriba: 0;
ancho: 100%;
altura: 100%;
transformar: traducirY(0);
sombra de cuadro: ninguna;
radio de borde: 0;
}Este código establece los estilos CSS para el primer y segundo cuadro, incluido el establecimiento de sus posiciones en 0, lo que significa que cubren la parte superior del contenedor. Además, establezca su altura al 100%, lo que significa que cubren toda la altura del contenedor. Finalmente, establezca sus propiedades de transformación en TranslateY(0), lo que significa que no se moverán hacia abajo. Además, establezca su radio de sombra y borde en 0, es decir, no tienen sombra ni borde.
.item:nésimo-niño(3) {
izquierda: 70%;
}Este código establece el estilo CSS del tercer cuadro, incluida la configuración de su posición al 70% desde el lado izquierdo del contenedor.
.item:nésimo-niño(4) {
izquierda: calc(70% + 250px);
}Este código establece el estilo CSS del cuarto cuadro, incluida la configuración de su posición en 250 px desde el lado derecho del tercer cuadro.
.item:nésimo-niño(5) {
izquierda: calc(70% + 500px);
}Este código establece el estilo CSS del quinto cuadro, incluida la configuración de su posición a 500 px desde el lado derecho del tercer cuadro.
.item:nésimo-niño(n+6) {
izquierda: calc(70% + 750px);
opacidad: 0;
}Este código establece los estilos CSS para todos los cuadros, incluida la configuración de su posición en 750 px desde la derecha del tercer cuadro. Además, establezca su opacidad en 0, es decir, son invisibles.
.botones {
ancho: 100%;
posición: absoluta;
abajo: 50px;
margen izquierdo: -50px;
alineación de texto: centro;
pantalla: flexible;
justificar-contenido: centro;
}Este código sirve para establecer el estilo CSS del botón, incluida la configuración del ancho del botón al 100%, es decir, el tamaño del botón es el mismo que el del contenedor. Al mismo tiempo, establezca la posición del botón a 50 px desde la parte inferior del contenedor. Finalmente, configure la alineación del botón en alineación central, lo que significa que el botón está centrado horizontalmente.
.botones div {
ancho: 120px;
altura: 50 píxeles;
altura de línea: 50 px;
alineación de texto: centro;
radio del borde: 5px;
margen: 0 25px;
transición: .5s;
cursor: puntero;
selección de usuario: ninguna;
tamaño de fuente: 20px;
color: #fff;
color de fondo: rgba(0, 0, 0, 0.4);
sombra de cuadro: 2px 2px 2px rgba(0, 0, 0, 0.2);
}Este código sirve para establecer el estilo CSS del botón, incluida la configuración del ancho del botón en 120 px y la altura en 50 px, que es el tamaño del botón. Al mismo tiempo, establezca la altura de la fila del botón en 50 px, que es la altura del botón. La alineación del texto del botón está centrada, es decir, el texto está centrado horizontalmente. El radio del borde del botón es de 5 píxeles, que son las esquinas redondeadas del botón. El margen del botón es 0 25 px, es decir, la distancia entre los lados izquierdo y derecho del botón en dirección horizontal es 25 px. El efecto de transición del botón es de 0,5 segundos, es decir, el tiempo del efecto de transición es de 0,5 segundos. El atributo del cursor del botón es puntero, es decir, cuando el mouse pasa sobre el botón, la forma del mouse cambiará a la forma de una mano. El atributo de selección de usuario del botón es ninguno, es decir, el usuario no puede seleccionar el texto en el botón. El tamaño de fuente del botón es 20px, que es el tamaño del texto del botón. El color del texto del botón es blanco, que es el color del texto del botón. El color de fondo del botón es rgba (0, 0, 0, 0,4), es decir, el color de fondo del botón es negro y la transparencia es 0,4. La propiedad de sombra del botón es 2px 2px 2px rgba (0, 0, 0, 0.2), es decir, la sombra del botón es 2px 2px 2px negra y la transparencia es 0.2.
Con esto concluye este artículo sobre el código de muestra del carrusel panorámico HTML + CSS. Para obtener más contenido relacionado con el carrusel panorámico HTML CSS, busque artículos anteriores en downcodes.com o continúe navegando por los siguientes artículos relacionados. Espero que todos apoyen a downcodes.com. ¡más en el futuro!