半圆图片滚动js

<div class="carousel">
  <div class="carousel-inner">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    <!-- 更多图片 -->
  </div>
</div>

.carousel {
  position: relative;
  width: 300px;
  height: 150px; /* 半圆的高度 */
  overflow: hidden;
}

.carousel-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: bottom center;
  animation: rotate 10s linear infinite;
}

.carousel-inner img {
  position: absolute;
  width: 100px; /* 图片宽度 */
  height: auto;
  bottom: 0;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(180deg); }
}

document.addEventListener('DOMContentLoaded', function() {
  const carouselInner = document.querySelector('.carousel-inner');
  const images = carouselInner.querySelectorAll('img');
  
  // 设置图片的位置
  images.forEach((img, index) => {
    const angle = (index / images.length) * 180;
    img.style.transform = `rotate(${angle}deg) translate(150px)`;
  });
});