How to make a photo album using JavaScript

Photo albums are a way for people to save and share beautiful moments, and JavaScript can help us implement a website with photo album functions. This article will introduce how to use JavaScript to create a simple photo album.

1. Preparation

Before making the photo album, we need to prepare some materials, such as pictures and CSS files. It is recommended to save the pictures in a separate folder for easy reference and management later.

2. HTML structure

The core of the photo album is to display pictures, so we need to build an HTML structure for picture display. Specifically, we can use the following HTML code:

<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>

In the above HTML structure, .gallery is the outermost container, .thumbnails is used for Container for displaying thumbnails, .photo is a container for displaying pictures, .nav is a container for displaying previous and next buttons.

3. CSS Style

In order to give the photo album a beautiful appearance, we need to use CSS to add styles to the above HTML structure. Specifically, we need to add styles for .gallery, .thumbnails, .photo, and .nav, for example:

.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;
}

The above CSS style is just an example and can be adjusted according to your own needs.

4. JavaScript interaction

With the HTML structure and CSS style, we now need to add interactive functions to the photo album through JavaScript. Specifically, we need to implement the following functions:

1. Initialize the photo list and thumbnail list, and start displaying the first photo;
2. Display the corresponding photo when the thumbnail is clicked;
3. Click the previous or next button to switch photos.

In order to implement these functions, we can write the following JavaScript code:

// 照片列表
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;
}

In the above JavaScript code, we define a photoList array and a thumbList array, which stores the addresses of photos and thumbnails respectively. After the page is loaded, we construct a thumbnail list through the forEach function, and bind a click event to each thumbnail to display the corresponding photo after clicking. At the same time, we also monitored the click events of the previous and next buttons, and switched photos based on the subscript of the current photo.

So far, we can already use JavaScript to create a simple photo album. Of course, in order to make the album more enriched and complete, we can also add some other functions, such as:

1. Zoom photos;
2. Slide to display photos;
3. Add Image description, tags and other elements.

In short, JavaScript provides unlimited possibilities. As long as you make good use of it, you can create powerful, beautiful and exquisite photo albums.

The above is the detailed content of How to make a photo album using JavaScript. For more information, please follow other related articles on the PHP Chinese website!