Les albums photo sont un moyen pour les gens de sauvegarder et de partager de beaux moments, et JavaScript peut nous aider à mettre en œuvre un site Web doté de fonctions d'album photo. Cet article explique comment utiliser JavaScript pour créer un album photo simple.
1. Préparation
Avant de réaliser l'album photo, nous devons préparer certains matériaux, tels que des images et des fichiers CSS. Il est recommandé de sauvegarder les images dans un dossier séparé pour faciliter leur référence et leur gestion ultérieure.
2. Structure HTML
Le cœur de l'album photo est d'afficher des images, nous devons donc créer une structure HTML pour l'affichage des images. Plus précisément, nous pouvons utiliser le code HTML suivant :
<div class="gallery"> <div class="thumbnails"> <!-- 用于展示照片缩略图的容器 --> </div> <div class="photo"> <img id="photoImg" src="" alt="照片"> <div class="nav"> <button id="prevBtn" class="btn">上一张</button> <button id="nextBtn" class="btn">下一张</button> </div> </div> </div>
Dans la structure HTML ci-dessus, .gallery
est le conteneur le plus externe et .thumbnails
est utilisé pour afficher les vignettes. Conteneur de vignettes, .photo
est un conteneur utilisé pour afficher des images, .nav
est un conteneur utilisé pour afficher les boutons précédent et suivant. .gallery
是最外层的容器,.thumbnails
是用于展示缩略图的容器,.photo
是用于展示图片的容器,.nav
是用于展示上一张和下一张按钮的容器。
三、CSS样式
为了让相册具备美观的外观,我们需要使用CSS为上述HTML结构添加样式。具体来说,我们需要为.gallery
、.thumbnails
、.photo
和.nav
添加样式,例如:
.gallery { max-width: 800px; margin: auto; } .thumbnails img { max-width: 100%; height: auto; cursor: pointer; } .photo { text-align: center; margin-top: 20px; } #photoImg { max-width: 100%; height: auto; } .nav { margin-top: 20px; } .btn { display: inline-block; margin-right: 20px; padding: 5px 10px; background-color: #007bff; color: #fff; border: none; border-radius: 5px; cursor: pointer; }
上述CSS样式仅仅是一个示例,可以根据自己的需要进行调整。
四、JavaScript交互
有了HTML结构和CSS样式,我们现在需要通过JavaScript为相册添加交互功能。具体来说,我们需要实现以下功能:
为了实现这些功能,我们可以编写以下JavaScript代码:
// 照片列表 const photoList = [ { src: "./images/1.jpg", alt: "第一张照片" }, { src: "./images/2.jpg", alt: "第二张照片" }, { src: "./images/3.jpg", alt: "第三张照片" } ]; // 缩略图列表 const thumbList = [ "./images/thumb/1.jpg", "./images/thumb/2.jpg", "./images/thumb/3.jpg" ]; // 当前照片下标 let currentPhotoIndex = 0; // 初始化缩略图 const thumbnails = document.querySelector(".thumbnails"); thumbList.forEach((thumbUrl, i) => { const img = document.createElement("img"); img.src = thumbUrl; img.alt = `缩略图${i + 1}`; img.addEventListener("click", () => { showPhoto(i); }); thumbnails.appendChild(img); }); // 初始化照片 showPhoto(currentPhotoIndex); // 切换上一张照片 document.querySelector("#prevBtn").addEventListener("click", () => { currentPhotoIndex = currentPhotoIndex > 0 ? currentPhotoIndex - 1 : photoList.length - 1; showPhoto(currentPhotoIndex); }); // 切换下一张照片 document.querySelector("#nextBtn").addEventListener("click", () => { currentPhotoIndex = currentPhotoIndex < photoList.length - 1 ? currentPhotoIndex + 1 : 0; showPhoto(currentPhotoIndex); }); // 展示指定下标的照片 function showPhoto(index) { const photoImg = document.querySelector("#photoImg"); photoImg.src = photoList[index].src; photoImg.alt = photoList[index].alt; }
上述JavaScript代码中,我们定义了一个photoList
数组和一个thumbList
数组,分别保存照片和缩略图的地址。在页面加载完成后,我们通过forEach
函数构建了缩略图列表,并给每个缩略图绑定了一个click
.gallery
, .thumbnails
, .photo
et .nav
, par exemple :Initialiser la liste des photos et la liste des vignettes, et commencer à afficher la première photo ;
🎜Afficher la photo correspondante lorsqu'on clique sur une vignette ; 🎜🎜Cliquez sur le bouton de la photo précédente ou suivante ; changer de photo. 🎜🎜🎜Afin d'implémenter ces fonctions, nous pouvons écrire le code JavaScript suivant : 🎜rrreee🎜Dans le code JavaScript ci-dessus, nous définissons un tableauphotoList
et un tableau thumbList
, qui sont enregistrés séparément. Adresses pour les photos et les vignettes. Une fois la page chargée, nous construisons une liste de vignettes via la fonction forEach
, lions un événement click
à chaque vignette et affichons la photo correspondante après avoir cliqué sur . Dans le même temps, nous avons également surveillé les événements de clic des boutons précédent et suivant et changé de photo en fonction de l'indice de la photo actuelle. 🎜🎜À ce stade, nous pouvons déjà utiliser JavaScript pour créer un simple album photo. Bien sûr, afin de rendre l'album plus riche et complet, nous pouvons également ajouter d'autres fonctions, telles que : 🎜🎜🎜Zoomer sur les photos ; 🎜🎜Swipe pour afficher les photos ; 🎜🎜Ajouter des descriptions d'images, des tags et d'autres éléments ; 🎜🎜🎜En bref, JavaScript offre des possibilités illimitées. Tant que vous en faites bon usage, vous pouvez créer des albums photo puissants, beaux et exquis. 🎜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!