用html写一个旋转木马

以下是一个简单的旋转木马的 HTML 和 CSS 代码示例：

HTML:

<div class="carousel">
  <div class="item"><img src="img1.jpg"></div>
  <div class="item"><img src="img2.jpg"></div>
  <div class="item"><img src="img3.jpg"></div>
</div>

CSS:

.carousel {
  position: relative;
  width: 80%;
  margin: auto;
  height: 400px;
  overflow: hidden;
}

.item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 1s ease;
}

.item.active {
  opacity: 1;
}

.item.next {
  transform: translateX(100%);
}

.item.prev {
  transform: translateX(-100%);
}

.carousel .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel .controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel .controls button {
  border: none;
  background: transparent;
  font-size: 24px;
  color: #fff;
  margin: 0 10px;
  cursor: pointer;
  outline: none;
}

JavaScript:

var items = document.querySelectorAll('.item');
var controls = document.querySelectorAll('.controls button');
var current = 0;

function initCarousel() {
  items[0].classList.add('active');
  controls.forEach(function(control) {
    control.addEventListener('click', handleControlClick);
  });
}

function handleControlClick() {
  if (this.classList.contains('prev')) {
    current--;
    if (current < 0) {
      current = items.length - 1;
    }
  } else {
    current++;
    if (current > items.length - 1) {
      current = 0;
    }
  }
  updateCarousel();
}

function updateCarousel() {
  var prev = current - 1;
  if (prev < 0) {
    prev = items.length - 1;
  }
  var next = current + 1;
  if (next > items.length - 1) {
    next = 0;
  }
  items.forEach(function(item) {
    item.classList.remove('prev', 'active', 'next');
  });
  items[prev].classList.add('prev');
  items[current].classList.add('active');
  items[next].classList.add('next');
}

initCarousel();

这是一个基本的旋转木马，它使用 CSS 过渡效果和 JavaScript 来实现轮播。在 HTML 中，我们创建了一个包含图像的 div 元素，并将其包装在一个具有 carousel 类的 div 元素中。然后，我们使用 CSS 将其设置为相对定位，并将其宽度设置为 80%，高度设置为 400px。此后，我们使用 overflow: hidden 隐藏溢出的元素。

接下来，我们为每个图像创建了一个 div 元素，并将其设置为绝对定位。然后，我们使用 opacity: 0 将其隐藏，并使用过渡效果将其设置为所有属性的动画效果。我们还为当前活动的图像添加了 active 类。

在 JavaScript 中，我们选择所有图像元素和控制按钮，并为每个按钮添加了一个点击事件处理程序。我们还创建了一个变量 current，用于跟踪当前活动的图像。

在 initCarousel 函数中，我们将第一个图像设置为活动状态，并将点击事件处理程序添加到所有控件按钮上。

在 handleControlClick 函数中，我们确定用户点击了哪个按钮，并相应地更新 current 变量。然后，我们调用 updateCarousel 函数，它将根据 current 变量更新图像。

在 updateCarousel 函数中，我们确定前一个和下一个图像，并将相应的类添加到每个图像元素中。我们还删除了 prev、active 和 next 类，以确保每个图像只有一个类。

最后，我们调用 initCarousel 函数以启动旋转木马。