js实现相册

使用HTML、CSS和JavaScript实现相册

创建一个简单的相册需要结合HTML结构、CSS样式和JavaScript交互功能。以下是一个基础的实现方案：

HTML结构

构建相册的基本框架，包含图片容器和导航按钮：

<div class="gallery">
  <div class="gallery-container">
    <img src="image1.jpg" class="active">
    <img src="image2.jpg">
    <img src="image3.jpg">
  </div>
  <button class="prev-btn">Previous</button>
  <button class="next-btn">Next</button>
</div>

CSS样式

为相册添加基本样式和过渡效果：

.gallery {
  position: relative;
  width: 800px;
  margin: 0 auto;
}

.gallery-container {
  position: relative;
  height: 500px;
  overflow: hidden;
}

.gallery-container img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.gallery-container img.active {
  opacity: 1;
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.prev-btn {
  left: 10px;
}

.next-btn {
  right: 10px;
}

JavaScript功能

实现图片切换逻辑：

document.addEventListener('DOMContentLoaded', function() {
  const images = document.querySelectorAll('.gallery-container img');
  const prevBtn = document.querySelector('.prev-btn');
  const nextBtn = document.querySelector('.next-btn');
  let currentIndex = 0;

  function showImage(index) {
    images.forEach(img => img.classList.remove('active'));
    images[index].classList.add('active');
  }

  prevBtn.addEventListener('click', function() {
    currentIndex = (currentIndex > 0) ? currentIndex - 1 : images.length - 1;
    showImage(currentIndex);
  });

  nextBtn.addEventListener('click', function() {
    currentIndex = (currentIndex < images.length - 1) ? currentIndex + 1 : 0;
    showImage(currentIndex);
  });

  // 自动轮播
  setInterval(function() {
    currentIndex = (currentIndex < images.length - 1) ? currentIndex + 1 : 0;
    showImage(currentIndex);
  }, 3000);
});

扩展功能

缩略图导航 添加缩略图可以增强用户体验：

<div class="thumbnails">
  <img src="image1-thumb.jpg" data-index="0" class="active">
  <img src="image2-thumb.jpg" data-index="1">
  <img src="image3-thumb.jpg" data-index="2">
</div>

const thumbnails = document.querySelectorAll('.thumbnails img');
thumbnails.forEach(thumb => {
  thumb.addEventListener('click', function() {
    currentIndex = parseInt(this.getAttribute('data-index'));
    showImage(currentIndex);
    thumbnails.forEach(t => t.classList.remove('active'));
    this.classList.add('active');
  });
});

图片懒加载 优化性能，延迟加载图片：

function lazyLoad() {
  const lazyImages = document.querySelectorAll('img[data-src]');
  lazyImages.forEach(img => {
    if(img.getBoundingClientRect().top < window.innerHeight) {
      img.src = img.getAttribute('data-src');
      img.removeAttribute('data-src');
    }
  });
}

window.addEventListener('scroll', lazyLoad);
window.addEventListener('load', lazyLoad);

响应式设计 使相册适应不同屏幕尺寸：

@media (max-width: 768px) {
  .gallery {
    width: 100%;
  }

  .gallery-container {
    height: 300px;
  }
}

这个实现提供了基础的相册功能，可以根据需求进一步扩展添加更多特性如全屏查看、图片描述、过渡动画等。