Comment créer un album photo en utilisant JavaScript

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为相册添加交互功能。具体来说，我们需要实现以下功能：

1. 初始化照片列表和缩略图列表，以及开始展示第一张照片；
2. 点击缩略图时展示相应的照片；
3. 点击上一张或下一张按钮切换照片。

为了实现这些功能，我们可以编写以下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

3. Style CSS

Afin de donner à l'album photo une belle apparence, nous devons utiliser CSS pour ajouter des styles à la structure HTML ci-dessus. Plus précisément, nous devons ajouter des styles pour .gallery, .thumbnails, .photo et .nav, par exemple :

rrreee
1. Le style CSS ci-dessus n'est qu'un exemple, vous pouvez l'ajuster en fonction de vos besoins.
2. 4. Interaction JavaScript
3. Avec la structure HTML et le style CSS, nous devons maintenant ajouter des fonctions interactives à l'album photo via JavaScript. Plus précisément, nous devons implémenter les fonctions suivantes :

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 tableau photoList 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!