如何使用javascript创建carousel，并使用keypress悬停到上一张和下一张图片？

<div class="carousel">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <button class="prev">上一张</button>
  <button class="next">下一张</button>
</div>

.carousel {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.carousel img.active {
  opacity: 1;
}

.carousel button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px;
  background-color: #000;
  color: #fff;
  border: none;
  cursor: pointer;
}

.carousel button.prev {
  left: 10px;
}

.carousel button.next {
  right: 10px;
}

// 获取carousel容器和图片
const carousel = document.querySelector('.carousel');
const images = carousel.querySelectorAll('img');

// 设置初始索引和激活图片
let currentIndex = 0;
images[currentIndex].classList.add('active');

// 切换到上一张图片
function prevImage() {
  images[currentIndex].classList.remove('active');
  currentIndex = (currentIndex - 1 + images.length) % images.length;
  images[currentIndex].classList.add('active');
}

// 切换到下一张图片
function nextImage() {
  images[currentIndex].classList.remove('active');
  currentIndex = (currentIndex + 1) % images.length;
  images[currentIndex].classList.add('active');
}

// 监听键盘按键事件
document.addEventListener('keydown', function(event) {
  if (event.key === 'ArrowLeft') {
    prevImage();
  } else if (event.key === 'ArrowRight') {
    nextImage();
  }
});

// 监听按钮点击事件
carousel.querySelector('.prev').addEventListener('click', prevImage);
carousel.querySelector('.next').addEventListener('click', nextImage);