使用js array for loop构建每个网格3张幻灯片的旋转木马

var images = [
  'image1.jpg',
  'image2.jpg',
  'image3.jpg',
  'image4.jpg',
  'image5.jpg',
  'image6.jpg',
  // 添加更多图片路径...
];

<div id="carousel"></div>

var carousel = document.getElementById('carousel');

for (var i = 0; i < images.length; i++) {
  var slide = document.createElement('div');
  slide.classList.add('slide');
  
  var image = document.createElement('img');
  image.src = images[i];
  
  slide.appendChild(image);
  carousel.appendChild(slide);
}

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

.slide {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s;
}

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

/* 添加旋转木马的动画效果 */

var slides = document.getElementsByClassName('slide');
var angle = 360 / slides.length;

for (var i = 0; i < slides.length; i++) {
  var rotateY = angle * i;
  slides[i].style.transform = 'rotateY(' + rotateY + 'deg) translateZ(200px)';
}