Implémentation d'une mise en page Web simple contenant cinq zones différentes, chacune avec une image d'arrière-plan différente et un certain espacement entre elles. Lorsque vous survolez une boîte, son image d’arrière-plan s’assombrit et le texte devient blanc. Les cases et boutons sont placés dans un conteneur et la page entière ressemble à une galerie.
<div class="conteneur">
<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="boutons">
<div class="gauche">
< Précédent</div>
<div class="center">Télécharger le fond d'écran</div>
<div class="right">Suivant ></div>
</div>
</div>
</div> * {
marge : 0 ;
remplissage : 0 ;
dimensionnement de la boîte : bordure-boîte ;
}
.conteneur {
largeur : 100vw ;
hauteur : 100vh ;
position : relative ;
débordement : caché ;
}
.article {
largeur : 240 px ;
hauteur : 160px ;
position : absolue ;
haut : 50 % ;
gauche : 0 ;
transformer : traduireY(-50 %);
rayon de bordure : 10 px ;
ombre de la boîte : 0 30px 50px #505050 ;
taille de l'arrière-plan : couverture ;
position d'arrière-plan : centre ;
transition : 1 s ;
}
.item:ntième-enfant(1),
.item:ntième-enfant(2) {
gauche : 0 ;
haut : 0 ;
largeur : 100 % ;
hauteur : 100 % ;
transformer : traduireY(0);
box-shadow : aucun ;
rayon de bordure : 0 ;
}
.item:ntième-enfant(3) {
gauche : 70 % ;
}
.item:ntième-enfant(4) {
gauche : calc(70% + 250px) ;
}
.item:ntième-enfant(5) {
gauche : calc(70% + 500px) ;
}
.item:ntième-enfant(n+6) {
gauche : calc(70% + 750px) ;
opacité : 0 ;
}
.boutons {
largeur : 100 % ;
position : absolue ;
en bas : 50 px ;
marge gauche : -50px ;
alignement du texte : centre ;
affichage : flexible ;
justifier-contenu : centre ;
}
.boutons div {
largeur : 120 px ;
hauteur : 50px ;
hauteur de ligne : 50 px ;
alignement du texte : centre ;
rayon de bordure : 5 px ;
marge : 0 25px ;
transition : 0,5 s ;
curseur : pointeur ;
sélection par l'utilisateur : aucun ;
taille de police : 20 px ;
couleur : #fff ;
couleur d'arrière-plan : 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(".boutons .right")
const slide = document.querySelector("#slide")
let openClick = true // Traitement de limitation (pour garantir que le processus d'exécution de l'animation, le bouton n'est pas cliqué à plusieurs reprises)
leftBtn.addEventListener("clic", () => {
si (openClick) {
openClick = false // Après avoir déclenché le clic, désactivez le bouton const items = document.querySelectorAll(".item")
slide.prepend(éléments[éléments.longueur - 1])
setTimeout(() => openClick = true, 1000) // 1s pour ouvrir à nouveau le bouton}
})
rightBtn.addEventListener("clic", () => {
si (openClick) {
openClick = faux
const items = document.querySelectorAll(".item")
slide.appendChild(éléments[0])
setTimeout(() => openClick = true, 1000)
}
}) * {
marge : 0 ;
remplissage : 0 ;
dimensionnement de la boîte : bordure-boîte ;
}Ce code définit le style CSS global, notamment en définissant le modèle de boîte de l'élément sur border-box, c'est-à-dire que la largeur et la hauteur du modèle de boîte incluent la bordure et le remplissage de l'élément, plutôt que uniquement le contenu de l'élément.
.conteneur {
largeur : 100vw ;
hauteur : 100vh ;
position : relative ;
débordement : caché ;
}Ce code définit le style CSS du conteneur, notamment en définissant la largeur et la hauteur du conteneur sur 100vw et 100vh, qui correspondent à la largeur et à la hauteur de la fenêtre. Dans le même temps, définissez le positionnement du conteneur sur un positionnement relatif, c'est-à-dire un positionnement par rapport à son élément parent. Enfin, définissez la propriété overflow du conteneur sur masqué, c'est-à-dire que les éléments qui dépassent la portée du conteneur ne seront pas affichés.
.article {
largeur : 240 px ;
hauteur : 160px ;
position : absolue ;
haut : 50 % ;
gauche : 0 ;
transformer : traduireY(-50 %);
rayon de bordure : 10 px ;
ombre de la boîte : 0 30px 50px #505050 ;
taille de l'arrière-plan : couverture ;
position d'arrière-plan : centre ;
transition : 1 s ;
}Ce code définit le style CSS de la boîte, notamment en définissant la largeur et la hauteur de la boîte à 240 px et 160 px, qui correspond à la taille de la boîte. Dans le même temps, définissez le positionnement de la boîte sur un positionnement absolu, c'est-à-dire un positionnement par rapport à son élément parent. Enfin, définissez le rayon de bordure de la boîte sur 10 px, qui correspond au coin arrondi de la boîte. La taille de l’image d’arrière-plan de la boîte est la couverture, qui couvre la totalité de la boîte. L'image d'arrière-plan est centrée. Enfin, réglez l'effet de transition de la boîte sur 1 seconde, c'est-à-dire que le temps de l'effet de transition est de 1 seconde.
.item:ntième-enfant(1),
.item:ntième-enfant(2) {
gauche : 0 ;
haut : 0 ;
largeur : 100 % ;
hauteur : 100 % ;
transformer : traduireY(0);
box-shadow : aucun ;
rayon de bordure : 0 ;
}Ce code définit les styles CSS pour les première et deuxième cases, notamment en définissant leurs positions sur 0, ce qui signifie qu'elles couvrent le haut du conteneur. Réglez également leur hauteur à 100 %, ce qui signifie qu'ils couvrent toute la hauteur du conteneur. Enfin, définissez leurs propriétés de transformation sur translationY(0), ce qui signifie qu'elles ne descendront pas. Définissez également leur rayon d’ombre et de bordure sur 0, c’est-à-dire qu’ils n’ont ni ombre ni bordure.
.item:ntième-enfant(3) {
gauche : 70 % ;
}Ce code définit le style CSS de la troisième case, notamment en définissant sa position à 70 % du côté gauche du conteneur.
.item:ntième-enfant(4) {
gauche : calc(70% + 250px) ;
}Ce code définit le style CSS de la quatrième case, notamment en définissant sa position à 250 px à partir du côté droit de la troisième case.
.item:ntième-enfant(5) {
gauche : calc(70% + 500px) ;
}Ce code définit le style CSS de la cinquième case, notamment en définissant sa position à 500 px à partir du côté droit de la troisième case.
.item:ntième-enfant(n+6) {
gauche : calc(70% + 750px) ;
opacité : 0 ;
}Ce code définit les styles CSS pour toutes les cases, notamment en définissant leur position à 750 px à partir de la droite de la troisième case. Définissez également leur opacité sur 0, c'est-à-dire qu'ils sont invisibles.
.boutons {
largeur : 100 % ;
position : absolue ;
en bas : 50 px ;
marge gauche : -50px ;
alignement du texte : centre ;
affichage : flexible ;
justifier-contenu : centre ;
}Ce code consiste à définir le style CSS du bouton, notamment en définissant la largeur du bouton à 100 %, c'est-à-dire que la taille du bouton est la même que celle du conteneur. Dans le même temps, définissez la position du bouton à 50 pixels du bas du conteneur. Enfin, définissez l’alignement du bouton sur l’alignement central, ce qui signifie que le bouton est centré horizontalement.
.boutons div {
largeur : 120 px ;
hauteur : 50px ;
hauteur de ligne : 50 px ;
alignement du texte : centre ;
rayon de bordure : 5 px ;
marge : 0 25px ;
transition : 0,5 s ;
curseur : pointeur ;
sélection par l'utilisateur : aucun ;
taille de police : 20 px ;
couleur : #fff ;
couleur d'arrière-plan : rgba(0, 0, 0, 0,4) ;
box-shadow : 2px 2px 2px rgba(0, 0, 0, 0.2);
}Ce code consiste à définir le style CSS du bouton, notamment en définissant la largeur du bouton à 120 px et la hauteur à 50 px, qui correspond à la taille du bouton. Dans le même temps, définissez la hauteur de ligne du bouton sur 50 px, ce qui correspond à la hauteur du bouton. L'alignement du texte du bouton est centré, c'est-à-dire que le texte est centré horizontalement. Le rayon de bordure du bouton est de 5 px, ce qui correspond aux coins arrondis du bouton. La marge du bouton est de 0 à 25 px, c'est-à-dire que la distance entre les côtés gauche et droit du bouton dans le sens horizontal est de 25 px. L'effet de transition du bouton est de 0,5 seconde, c'est-à-dire que le temps d'effet de transition est de 0,5 seconde. L'attribut curseur du bouton est un pointeur, c'est-à-dire que lorsque la souris survole le bouton, la forme de la souris se transforme en forme de main. L'attribut de sélection utilisateur du bouton est aucun, c'est-à-dire que l'utilisateur ne peut pas sélectionner le texte du bouton. La taille de police du bouton est de 20 px, ce qui correspond à la taille du texte du bouton. La couleur du texte du bouton est le blanc, qui est la couleur du texte du bouton. La couleur d'arrière-plan du bouton est rgba(0, 0, 0, 0.4), c'est-à-dire que la couleur d'arrière-plan du bouton est noire et la transparence est de 0,4. La propriété shadow du bouton est 2px 2px 2px rgba(0, 0, 0, 0.2), c'est-à-dire que l'ombre du bouton est 2px 2px 2px black et la transparence est de 0,2.
Ceci conclut cet article sur l'exemple de code du carrousel panoramique HTML+CSS. Pour plus de contenu du carrousel panoramique HTML CSS, veuillez rechercher les articles précédents sur downcodes.com ou continuer à parcourir les articles connexes suivants. plus à l'avenir !