html并列式轮播图

HTML 并列式轮播图通常指的是使用 HTML、CSS 和 JavaScript（有时也会结合 JavaScript 库或框架如 jQuery, Swiper, 或 Bootstrap Carousel）创建的一种动态图片展示效果，图片会按照设定的规则在多个位置上并排显示，用户可以通过点击或自动滚动来切换图片。

实现一个并列式轮播图的基本步骤如下：

1. **HTML结构**:
- 使用 `div` 元素作为容器，包含多个 `img` 或 `figure` 元素（每个代表一张图片）和一个 `nav` 元素用于导航按钮或指示器。

   <div class="carousel">
     <div class="carousel-item">
       <img src="image1.jpg" alt="Image 1">
     </div>
     <div class="carousel-item">
       <img src="image2.jpg" alt="Image 2">
     </div>
     <!-- 添加更多图片 -->
     <nav class="carousel-navigation">
       <button data-slide="prev">Previous</button>
       <button data-slide="next">Next</button>
     </nav>
   </div>

2. **CSS样式**:
- 风格化 `.carousel`, `.carousel-item`, 图片和导航元素的布局、尺寸、颜色等。

   .carousel {
     position: relative;
     width: 100%;
     overflow: hidden;
   }
   .carousel-item {
     width: 50%; /* 假设图片宽度 */
     float: left;
     transition: transform 0.5s;
   }
   .carousel-navigation button {
     /* 样式设置 */
   }

3. **JavaScript或库**:
- 使用 JavaScript 或 JavaScript 库来处理轮播功能，如手动触发切换、自动切换以及响应导航按钮。

   const carouselItems = document.querySelectorAll('.carousel-item');
   let currentSlide = 0;

   function slideShow() {
     carouselItems[currentSlide].style.transform = 'translateX(0)';
     carouselItems[(currentSlide + 1) % carouselItems.length].style.transform = 'translateX(-100%)';
     setTimeout(() => slideShow(), 3000); // 每隔3秒切换到下一张
   }

   // 初始化轮播
   slideShow();

   // 添加按钮点击事件
   document.querySelectorAll('.carousel-navigation button').forEach((btn, index) => {
     btn.addEventListener('click', () => {
       if (btn.dataset.slide === 'prev') {
         currentSlide--;
       } else {
         currentSlide++;
       }
       currentSlide = currentSlide % carouselItems.length; // 保持索引在合法范围内
       carouselItems.forEach(item => item.style.transform = 'translateX(0)');
       carouselItems[currentSlide].style.transform = 'translateX(-100%)';
     });
   });