Maison > Article > interface Web > Développer une galerie Web en utilisant JavaScript

Développer une galerie Web en utilisant JavaScript

PHPzoriginal: 2023-08-09 20:10:431123parcourir

Utiliser JavaScript pour développer des galeries Web

À mesure qu'Internet continue de se développer, la conception Web est devenue plus raffinée et interactive. Parmi eux, la galerie est un élément de conception Web courant, qui peut afficher plusieurs images et fournir des fonctions de navigation et de commutation. Cet article explique comment développer une galerie Web simple à l'aide de JavaScript et fournit des exemples de code.

Tout d’abord, nous devons préparer quelques ressources d’images. Vous pouvez créer un dossier appelé « images » dans votre dossier de projet et y placer toutes vos images. Ici, nous utilisons cinq images comme exemples. Une fois les ressources d'images prêtes, nous commençons à écrire du code JavaScript.

Créer une structure HTML
Nous devons d'abord créer une structure HTML pour afficher les images et fournir des fonctions de commutation. Le code est le suivant :

<!DOCTYPE html>
<html>
<head>
    <title>网页画廊</title>
    <style>
        .gallery {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 400px;
        }
        
        .gallery img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        
        .controls button {
            margin: 0 10px;
        }
    </style>
</head>
<body>
    <div class="gallery">
        <img id="image" src="images/1.jpg" alt="image">
    </div>
    <div class="controls">
        <button id="prev">上一张</button>
        <button id="next">下一张</button>
    </div>

    <script src="script.js"></script>
</body>
</html>

Dans le code ci-dessus, nous utilisons un div avec la classe "gallery" pour contenir l'image, et un élément img avec l'identifiant "image" pour afficher l'image. Vous trouverez ci-dessous un div avec la classe "controls", qui contient deux boutons permettant de passer aux images précédentes et suivantes. De cette façon, nous créons la structure HTML de base.

Écrire la logique JavaScript
Ensuite, nous devons écrire du code JavaScript pour implémenter la fonction de changement d'image. Créez un fichier nommé "script.js" dans le dossier du projet et écrivez le code suivant :

// 获取元素
const image = document.getElementById("image");
const prevBtn = document.getElementById("prev");
const nextBtn = document.getElementById("next");

// 图片列表
const images = ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg"];

// 当前显示的图片索引
let currentIndex = 0;

// 切换到上一张图片
prevBtn.addEventListener("click", () => {
    currentIndex--;
    if (currentIndex < 0) {
        currentIndex = images.length - 1;
    }
    image.src = images[currentIndex];
});

// 切换到下一张图片
nextBtn.addEventListener("click", () => {
    currentIndex++;
    if (currentIndex >= images.length) {
        currentIndex = 0;
    }
    image.src = images[currentIndex];
});

Dans le code ci-dessus, on obtient d'abord les éléments qui doivent être exploités via la méthode getElementById, à savoir l'élément img et les deux boutons . Ensuite, nous définissons un tableau images qui contient les chemins de toutes les images et initialisons l'index de l'image actuellement affichée à 0.

Ensuite, ajoutez un écouteur d'événement click au bouton prevBtn via la méthode addEventListener. Lorsque vous cliquez sur le bouton, currentIndex est décrémenté de 1 et vérifie si l'index est inférieur à 0. Si tel est le cas, définissez currentIndex sur la valeur d'index du dernier élément du tableau images, c'est-à-dire pour implémenter la commutation de boucle. Enfin, définissez l'attribut src de l'élément img sur le chemin de l'image correspondant à l'index actuel.

Ensuite, nous ajoutons un écouteur d'événement de clic similaire au bouton nextBtn. Lorsque vous cliquez sur le bouton, currentIndex est incrémenté de 1 et vérifie si l'index dépasse la longueur du tableau d'images. Si tel est le cas, définissez currentIndex sur 0 pour implémenter la commutation de boucle. Enfin, définissez également l'attribut src de l'élément img sur le chemin de l'image correspondant à l'index actuel.

Exécutez la page Web
Après avoir terminé les étapes ci-dessus, enregistrez le fichier et ouvrez le fichier HTML dans le navigateur. Nous pouvons maintenant utiliser les boutons précédent et suivant pour changer les images affichées. Essayez de cliquer sur le bouton pour voir si vous pouvez changer d'image normalement.

Résumé
Ce qui précède est un exemple simple d'utilisation de JavaScript pour développer une galerie Web. En modifiant dynamiquement l'attribut src de l'élément img, nous pouvons implémenter la fonction de changement d'image. Ceci n'est qu'un exemple de base, vous pouvez l'étendre davantage, comme en ajoutant le préchargement d'image, le zoom, etc. J'espère que cet article pourra vous apporter un peu d'inspiration et je vous souhaite de meilleurs résultats en matière de conception de sites 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!

JavaScript html 循环 JS 事件

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Utiliser JavaScript pour implémenter la fonction de loupe d'imageArticle suivant：Utiliser JavaScript pour implémenter la fonction de loupe d'image

Articles Liés

Voir plus