用HTML写一个旋转相册

使用HTML创建一个旋转相册，通常结合CSS和JavaScript（例如，jQuery或更现代的库如Swiper）来实现交互效果。以下是一个简单的示例，展示如何使用HTML、CSS和JavaScript来构建一个基础的轮播图：

**HTML:**

<div class="carousel-container">
  <div class="carousel-items">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    <!-- 更多图片 -->
  </div>
  <div class="arrow-left"></div>
  <div class="arrow-right"></div>
</div>

**CSS:**

.carousel-container {
  position: relative;
  width: 100%;
  height: 300px; /* 根据实际需求调整 */
}

.carousel-items {
  display: flex;
  overflow: hidden;
  transition: transform 0.6s ease;
}

.carousel-items img {
  width: 100%;
  height: auto;
}

.arrow-left, .arrow-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

**JavaScript (使用jQuery):**

$(document).ready(function() {
  var currentIndex = 0;
  var images = $('.carousel-items img');
  
  function showSlide(n) {
    images.eq(currentIndex).hide();
    currentIndex = (currentIndex + n + images.length) % images.length;
    images.eq(currentIndex).fadeIn();
  }
  
  $('.arrow-left').click(function() {
    showSlide(-1);
  });
  
  $('.arrow-right').click(function() {
    showSlide(1);
  });
});

这个例子中，当用户点击左右箭头时，JavaScript会更改`transform: translateX`来切换显示的图片。这只是一个基本的实现，实际项目可能需要更复杂的动画、触屏滑动控制、自动轮播等功能，你可以根据需求添加更多的CSS样式和JavaScript代码。