Cara menggunakan JavaScript untuk membuat album foto

Album foto ialah cara untuk orang ramai menyimpan dan berkongsi detik indah, dan JavaScript boleh membantu kami melaksanakan tapak web dengan fungsi album foto. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mencipta album foto ringkas.

1. Persediaan

Sebelum membuat album foto, kita perlu menyediakan beberapa bahan, seperti gambar dan fail CSS. Adalah disyorkan untuk menyimpan gambar dalam folder berasingan untuk rujukan dan pengurusan mudah kemudian.

2. Struktur HTML

Inti album foto adalah untuk memaparkan gambar, jadi kita perlu membina struktur HTML untuk paparan gambar. Secara khusus, kita boleh menggunakan kod HTML berikut:

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

Dalam struktur HTML di atas, .gallery ialah bekas paling luar, .thumbnails ialah bekas yang digunakan untuk memaparkan lakaran kecil dan .photo ialah Bekas yang digunakan untuk memaparkan imej, .nav ialah bekas yang digunakan untuk memaparkan butang sebelumnya dan seterusnya.

3. Gaya CSS

Untuk memberikan album foto rupa yang cantik, kita perlu menggunakan CSS untuk menambah gaya pada struktur HTML di atas. Khususnya, kita perlu menambah gaya untuk .gallery, .thumbnails, .photo dan .nav, sebagai contoh:

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

Gaya CSS di atas hanyalah contoh, anda boleh melaraskannya mengikut keperluan anda.

4. Interaksi JavaScript

Dengan struktur HTML dan gaya CSS, kami kini perlu menambah fungsi interaktif pada album foto melalui JavaScript. Khususnya, kita perlu melaksanakan fungsi berikut:

1. Mulakan senarai foto dan senarai lakaran kenit, dan mula memaparkan foto pertama;
2. Klik butang sebelumnya atau seterusnya untuk menukar foto.
Untuk melaksanakan fungsi ini, kami boleh menulis kod JavaScript berikut:

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

Dalam kod JavaScript di atas, kami mentakrifkan tatasusunan

dan tatasusunan

, yang disimpan secara berasingan Alamat untuk foto dan lakaran kenit. Selepas halaman dimuatkan, kami membina senarai lakaran kecil melalui fungsi photoList dan mengikat acara thumbList pada setiap lakaran kecil untuk memaparkan foto yang sepadan selepas mengklik. Pada masa yang sama, kami juga memantau peristiwa klik pada butang sebelumnya dan seterusnya, dan menukar foto berdasarkan subskrip foto semasa. forEachclickSetakat ini, kami boleh menggunakan JavaScript untuk mencipta album foto ringkas. Sudah tentu, untuk menjadikan album lebih kaya dan lengkap, kami juga boleh menambah beberapa fungsi lain, seperti:

zum foto

1. slaid untuk memaparkan foto; >
tambahkan perihalan imej, teg dan elemen lain.
3. Ringkasnya, JavaScript menyediakan kemungkinan tanpa had selagi anda memanfaatkannya dengan baik, anda boleh mencipta album foto yang hebat, cantik dan indah.

Atas ialah kandungan terperinci Cara menggunakan JavaScript untuk membuat album foto. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!