js跑马灯轮播图

JS跑马灯轮播图可以通过结合定时器和CSS样式实现。以下是一个简单的例子：

HTML代码：

<div id="carousel-container">
  <div id="carousel-content">
    <img src="image1.jpg" alt="图片1">
    <img src="image2.jpg" alt="图片2">
    <img src="image3.jpg" alt="图片3">
  </div>
</div>

CSS样式：

#carousel-container {
  width: 400px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

#carousel-content {
  position: absolute;
  white-space: nowrap;
}

#carousel-content img {
  width: 400px;
  height: 300px;
  display: inline-block;
}

@keyframes carousel {
  0% {
    left: 0;
  }
  100% {
    left: -1200px; /* 图片数量乘以容器宽度 */
  }
}

JS代码：

var carouselContent = document.getElementById('carousel-content');
var images = carouselContent.getElementsByTagName('img');
var imageCount = images.length;

var currentIndex = 0;
var intervalId = setInterval(changeImage, 3000);

function changeImage() {
  currentIndex++;
  if (currentIndex >= imageCount) {
    currentIndex = 0;
  }
  carouselContent.style.left = '-' + (currentIndex * 400) + 'px'; /* 每张图片的宽度为400px */
}

通过以上代码，可以实现一个简单的JS跑马灯轮播图效果。需要注意的是，CSS样式中的动画时间和容器的宽高以及图片的宽高需要根据实际情况进行调整。同时，还可以使用CSS3的transform属性来实现更加流畅的动画效果。