轮播图缩放

以下是一个使用JavaScript实现轮播图缩放的示例代码：

HTML代码：

<div id="carousel">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

CSS代码：

#carousel {
  width: 500px;
  height: 300px;
  overflow: hidden;
}

#carousel img {
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

#carousel img.active {
  transform: scale(1.2);
}

JavaScript代码：

window.addEventListener('DOMContentLoaded', function() {
  var carousel = document.getElementById('carousel');
  var images = carousel.getElementsByTagName('img');
  var currentIndex = 0;

  setInterval(function() {
    // 移除上一个激活的图片
    images[currentIndex].classList.remove('active');

    // 计算下一个图片的索引
    currentIndex = (currentIndex + 1) % images.length;

    // 添加当前图片的激活类
    images[currentIndex].classList.add('active');
  }, 2000);
});

这段代码实现了一个基本的轮播图功能，每2秒钟切换到下一张图片，并通过缩放效果突出显示当前图片。你可以根据实际需求进行调整，例如调整轮播图的尺寸、切换间隔时间等。