轮播图片，手风琴效果

轮播图片（Carousel）是一种常见的网页设计元素，用于展示一组图片或内容，在用户滚动时按照一定的顺序切换显示下一张或多张图像。轮播通常包含以下几个关键组件：

1. 图片容器：一个包含所有图片的HTML元素，如`<ul>`列表，每张图片作为一个列表项（`<li>`）。
2. 图片滑块：控制图片切换的元素，可以是按钮、鼠标滚轮事件或者是响应式触摸滑动。
3. 切换逻辑：JavaScript或者CSS动画驱动图片的前进后退。

手风琴效果（Accordion）则是另一种折叠导航组件，用户点击或触碰某个标题时，对应的面板内容会展开，其他内容则折叠。这通常使用CSS和JavaScript配合实现：

- 标题（通常是`<h3>`或其他可点击元素）
- 内容区域（可能是一个`<div>`，开始时设置为`display: none`）
- 点击处理函数，切换内容的可见性

下面是简化的HTML和JavaScript示例：

<ul class="carousel">
  <li><img src="image1.jpg" alt="Slide 1" /></li>
  <!-- 更多图片... -->
</ul>

<div class="accordion">
  <h3>Panel 1</h3>
  <p>Content for Panel 1...</p>
  <!-- 更多面板... -->
</div>

<script>
// 轮播示例
const carousel = document.querySelector('.carousel');
let index = 0;
carousel.addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    index = (index + 1) % carousel.children.length;
    carousel.children[index].scrollIntoView({ behavior: 'smooth' });
  }
});

// 手风琴示例
const accordions = document.querySelectorAll('.accordion h3');
accordions.forEach((header) => {
  header.addEventListener('click', () => {
    header.nextElementSibling.toggleClassName('active');
  });
});
</script>