js实现相册

实现相册功能

使用JavaScript实现相册功能通常涉及图片展示、切换、缩放等交互。以下是基于HTML、CSS和JavaScript的简易相册实现方案。

HTML结构

创建基础的HTML结构，包含图片容器和导航按钮：

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

CSS样式

为相册添加基础样式，确保图片切换效果流畅：

.gallery {
  position: relative;
  width: 600px;
  height: 400px;
  margin: 0 auto;
  overflow: hidden;
}
.gallery img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s;
  opacity: 0;
}
.gallery img.active {
  opacity: 1;
}
button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
.prev { left: 10px; }
.next { right: 10px; }

JavaScript逻辑

实现图片切换功能：

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

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

  prevBtn.addEventListener('click', () => {
    currentIndex = (currentIndex - 1 + images.length) % images.length;
    showImage(currentIndex);
  });

  nextBtn.addEventListener('click', () => {
    currentIndex = (currentIndex + 1) % images.length;
    showImage(currentIndex);
  });

  // 初始化显示第一张图片
  showImage(0);
});

扩展功能

1. 缩略图导航
   添加缩略图列表，点击可快速跳转：

   

   <div class="thumbnails">
     <img src="image1_thumb.jpg" data-index="0">
     <img src="image2_thumb.jpg" data-index="1">
     <img src="image3_thumb.jpg" data-index="2">
   </div>

   document.querySelectorAll('.thumbnails img').forEach(thumb => {
     thumb.addEventListener('click', () => {
       currentIndex = parseInt(thumb.getAttribute('data-index'));
       showImage(currentIndex);
     });
   });

2. 自动轮播
   添加定时自动切换功能：

   let intervalId = setInterval(() => {
     currentIndex = (currentIndex + 1) % images.length;
     showImage(currentIndex);
   }, 3000);
   
   // 鼠标悬停时暂停轮播
   document.querySelector('.gallery').addEventListener('mouseenter', () => {
     clearInterval(intervalId);
   });
   document.querySelector('.gallery').addEventListener('mouseleave', () => {
     intervalId = setInterval(() => {
       currentIndex = (currentIndex + 1) % images.length;
       showImage(currentIndex);
     }, 3000);
   });

3. 响应式设计
   通过CSS媒体查询适配不同屏幕尺寸：

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

注意事项

• 图片路径需根据实际项目结构调整
• 大图加载可能需要预加载优化
• 移动端可添加触摸事件支持滑动切换