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