


Comment créer une mise en page carrousel réactive en utilisant HTML et CSS
Oct 20, 2023 pm 04:24 PMComment créer une mise en page de carrousel réactif en utilisant HTML et CSS
Dans la conception Web moderne, les carrousels sont un élément courant. Il peut attirer l'attention de l'utilisateur, afficher plusieurs contenus ou images et basculer automatiquement. Dans cet article, nous expliquerons comment créer une mise en page carrousel réactive en utilisant HTML et CSS.
Tout d'abord, nous devons créer une structure HTML de base et ajouter les styles CSS requis. Ce qui suit est une structure HTML simple?:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>響應式輪播圖布局</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="carousel"> <img src="/static/imghw/default1.png" data-src="image1.jpg" class="lazy" alt="Image 1"> <img src="/static/imghw/default1.png" data-src="image2.jpg" class="lazy" alt="Image 2"> <img src="/static/imghw/default1.png" data-src="image3.jpg" class="lazy" alt="Image 3"> </div> <script src="script.js"></script> </body> </html>
Dans le code ci-dessus, nous utilisons l'élément <div>
pour contenir le contenu du carrousel, et utilisons <img alt="Comment créer une mise en page carrousel réactive en utilisant HTML et CSS" ></ code> élément pour afficher les images. Nous avons également introduit une feuille de style CSS <code>style.css
et un fichier JavaScript script.js
pour obtenir l'effet carrousel. <div>
元素來包含輪播圖的內(nèi)容,并使用<img alt="Comment créer une mise en page carrousel réactive en utilisant HTML et CSS" >
元素來顯示圖片。我們還引入了一個CSS樣式表style.css
和一個JavaScript文件script.js
,用于實現(xiàn)輪播圖的效果。
接下來,我們將使用CSS來實現(xiàn)響應式的布局。在style.css
文件中,添加以下代碼:
.carousel { display: flex; overflow: hidden; } .carousel img { width: 100%; height: auto; transition: transform 1s ease-in-out; } .carousel img:not(:first-child) { transform: translateX(100%); } .carousel img.active { transform: translateX(0%); }
在上面的代碼中,我們首先使用display: flex;
將輪播圖容器<div class="carousel">
設置為一個彈性容器,使其中的圖片水平排列。然后,我們使用overflow: hidden;
來隱藏容器中溢出的內(nèi)容。
接著,我們將所有的<img alt="Comment créer une mise en page carrousel réactive en utilisant HTML et CSS" >
元素的寬度設置為100%
,使其能夠適應容器的寬度。我們還為圖片添加了一個過渡效果transition: transform 1s ease-in-out;
,這樣當輪播圖發(fā)生變化時,圖片會有一個平滑的動畫效果。
然后,我們使用transform: translateX(100%);
將除了第一張圖片以外的所有圖片向右偏移。這樣,當頁面加載時,默認顯示的是第一張圖片。
最后,我們使用transform: translateX(0%);
來顯示當前激活的圖片。這個樣式我們將在JavaScript中設置。
現(xiàn)在,我們需要在JavaScript文件script.js
中實現(xiàn)輪播圖的切換功能。添加以下代碼:
const carouselImages = document.querySelectorAll('.carousel img'); let currentIndex = 0; function switchImage() { const previousIndex = currentIndex; currentIndex = (currentIndex + 1) % carouselImages.length; carouselImages[previousIndex].classList.remove('active'); carouselImages[currentIndex].classList.add('active'); } setInterval(switchImage, 3000);
在上面的代碼中,我們首先通過document.querySelectorAll('.carousel img')
選擇所有輪播圖中的圖片,并將其保存在carouselImages
數(shù)組中。然后,我們定義了一個變量currentIndex
來追蹤當前激活的圖片的索引。
接著,我們創(chuàng)建了一個名為switchImage
的函數(shù),來切換圖片。在函數(shù)中,我們首先將previousIndex
設置為當前索引,然后將currentIndex
更新為下一個圖片的索引。通過使用currentIndex = (currentIndex + 1) % carouselImages.length;
,我們能夠循環(huán)切換圖片,當索引達到數(shù)組的長度時,重新回到第一張圖片。
然后,我們使用classList
來添加和移除active
類,以顯示和隱藏激活的圖片。
最后,我們使用setInterval
定時器來每隔3秒調(diào)用switchImage
style.css
, ajoutez le code suivant?: rrreee
Dans le code ci-dessus, nous utilisons d'aborddisplay: flex;
pour convertir le conteneur carrousel < ;div class="carousel">
est défini sur un conteneur flexible afin que les images qu'il contient soient disposées horizontalement. Ensuite, nous utilisons overflow: Hidden;
pour masquer le contenu du débordement dans le conteneur. Ensuite, nous définissons la largeur de tous les éléments <img alt="Comment créer une mise en page carrousel réactive en utilisant HTML et CSS" >
sur 100%
afin qu'ils tiennent dans la largeur du conteneur. Nous avons également ajouté un effet de transition transition: transform 1s easy-in-out;
à l'image, de sorte que lorsque le carrousel change, l'image ait un effet d'animation fluide. Ensuite, nous utilisons transform: translateX(100%);
pour décaler toutes les images sauf la première image à droite. De cette fa?on, lors du chargement de la page, la première image est affichée par défaut. ????Enfin, nous utilisons transform: translateX(0%);
pour afficher l'image actuellement active. Nous définirons ce style en JavaScript. ????Maintenant, nous devons implémenter la fonction de commutation de carrousel dans le fichier JavaScript script.js
. Ajoutez le code suivant?: ??rrreee?? Dans le code ci-dessus, nous sélectionnons d'abord toutes les images du carrousel via document.querySelectorAll('.carousel img')
et les enregistrons dans carouselImages code> tableau. Ensuite, nous définissons une variable <code>currentIndex
pour suivre l'index de l'image actuellement active. ????Ensuite, nous avons créé une fonction appelée switchImage
pour changer d'image. Dans la fonction, nous définissons d'abord previousIndex
sur l'index actuel, puis mettons à jour currentIndex
vers l'index de l'image suivante. En utilisant currentIndex = (currentIndex + 1) % carouselImages.length;
, nous pouvons parcourir les images et revenir à la première image lorsque l'index atteint la longueur du tableau. ????Ensuite, nous utilisons classList
pour ajouter et supprimer des classes active
afin d'afficher et de masquer les images actives. ????Enfin, nous utilisons la minuterie setInterval
pour appeler la fonction switchImage
toutes les 3 secondes afin d'obtenir l'effet de changement automatique d'image. ????Maintenant, lorsque vous ouvrez le navigateur, vous pouvez voir une mise en page carrousel réactive. Les images changent automatiquement toutes les 3 secondes avec une animation de transition fluide. Vous pouvez modifier les images en HTML et les styles en CSS pour créer votre propre mise en page de carrousel selon vos besoins. ????Résumé?: ????Cet article explique comment utiliser HTML et CSS pour créer une mise en page carrousel réactive. En utilisant une mise en page flexible et des effets de transition CSS, nous avons pu créer un magnifique carrousel et utiliser JavaScript pour implémenter sa fonction de commutation automatique. J'espère que cet article vous sera utile pour la conception de votre site Web?! ??Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Outils d'IA chauds

Undress AI Tool
Images de déshabillage gratuites

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!

Article chaud

Outils chauds

Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Le style du lien doit distinguer différents états à travers des pseudo-classes. 1. Utilisez un lien A: pour définir le style de lien inapproprié, 2. A: Visité pour définir le lien accessible, 3. A: Hover pour définir l'effet de survol, 4. A: Actif pour définir le style de clic, 5. A: Focus assure l'accessibilité au clavier, suivez toujours l'ordre LVHA pour éviter les conflits de style. Vous pouvez améliorer la convivialité et l'accessibilité en ajoutant le rembourrage, le curseur: pointeur et la conservation ou la personnalisation des contours de mise au point. Vous pouvez également utiliser un soulignement à la frontière ou à l'animation pour vous assurer que le lien a une bonne expérience utilisateur et l'accessibilité dans tous les états.

Les feuilles de styles d'agent utilisateur sont les styles CSS par défaut que les navigateurs s'appliquent automatiquement pour garantir que les éléments HTML qui n'ont pas ajouté de styles personnalisés sont toujours lisibles de base. Ils affectent l'apparence initiale de la page, mais il existe des différences entre les navigateurs, ce qui peut conduire à un affichage incohérent. Les développeurs résolvent souvent ce problème en réinitialisant ou standardiquant les styles. Utilisez le panneau de calcul ou de style des outils du développeur pour afficher les styles par défaut. Les opérations de couverture courantes comprennent la compensation des marges internes et extérieures, la modification des soulignements de liaison, l'ajustement des tailles de titre et les styles de bouton unificateurs. Comprendre les styles d'agent utilisateur peut aider à améliorer la cohérence entre les navigateurs et à permettre un contr?le de disposition précis.

SémantichtmlimprovesbothseoandaccessibilityByusing a été ultime

Pour créer une liste HTML non ordonnée, vous devez utiliser une balise pour définir un conteneur de liste. Chaque élément de liste est enveloppé d'une balise et le navigateur ajoutera automatiquement des balles; 1. Créez une liste avec une balise; 2. Chaque élément de liste est défini avec une balise; 3. Le navigateur génère automatiquement des symboles de points par défaut; 4. Les sublilistes peuvent être mis en ?uvre par le biais de la nidification; 5. Utilisez l'attribut de type de style liste de CSS pour modifier le style de symbole, tel que le disque, le cercle, le carré ou aucun; Utilisez ces balises correctement pour générer une liste standard non ordonnée.

Le filtre de fond est utilisé pour appliquer des effets visuels au contenu derrière les éléments. 1. Utilisez le filtre en toile de fond: flou (10px) et autre syntaxe pour obtenir l'effet de verre givré; 2. Prend en charge plusieurs fonctions de filtre telles que le flou, la luminosité, le contraste, etc. et peut être superposé; 3. Il est souvent utilisé dans la conception des cartes en verre, et il est nécessaire de s'assurer que les éléments chevauchent l'arrière-plan; 4. Les navigateurs modernes ont un bon support et @Supports peut être utilisé pour fournir des solutions de rétrogradation; 5. évitez les valeurs de flou excessive et redémarrez fréquents pour optimiser les performances. Cet attribut ne prend effet que lorsqu'il y a du contenu derrière les éléments.

Utilisez l'attribut onClick dans HTML pour lier directement les événements de clic, qui conviennent aux scénarios simples mais qui ne sont pas propices à la maintenance du code; 2. La fonction d'attribut d'attribut ONClick des éléments en JavaScript est plus propice aux structures et aux comportements séparant, mais écrasera le gestionnaire d'événements précédent; 3. Il est recommandé d'utiliser la méthode AddeveventListener pour prendre en charge la surveillance des événements multiples et de mieux contr?ler le flux d'événements, et devrait fonctionner après le chargement du DOM pour éviter les erreurs courantes telles que l'accès prématuré aux éléments ou les conflits de devis en HTML. Par conséquent, ONClick convient aux débutants et aux petits projets, tandis qu'AdveventListener est plus adapté aux applications complexes.

TOCENDERADIVHORIZONTALLEALLEMENT, SEAWIDTHANDUSEMARGIN: 0AUTO.2

Pour atteindre le chevauchement des éléments CSS, vous devez utiliser le positionnement et les attributs d'index z. 1. Utilisez la position et l'index z: définissez des éléments sur un positionnement non statique (comme absolu, relatif, etc.) et contr?ler l'ordre d'empilement via l'index z, plus la valeur est grande, plus la valeur est élevée. 2. 3.
