原生js 走马灯轮播图

原生JS实现走马灯轮播图可以使用以下步骤：

1. 创建一个包含图片的HTML结构，每个图片都放在一个容器中，并将它们水平排列。可以使用无序列表（ul）和列表项（li）来实现。

<div class="slider">
  <ul class="slides">
    <li><img src="image1.jpg" alt="Image 1"></li>
    <li><img src="image2.jpg" alt="Image 2"></li>
    <li><img src="image3.jpg" alt="Image 3"></li>
  </ul>
</div>

2. 在CSS文件中设置样式，使得图片容器的宽度等于一张图片的宽度，并且设置overflow属性为hidden，隐藏超出容器宽度的部分。

.slider {
  width: 400px;
  overflow: hidden;
}

.slides {
  display: flex;
  transition: transform 0.3s ease-in-out;}

.slides li {
  flex: 0 0 400px;
}

3. 使用JavaScript来实现轮播效果。首先，获取轮播图的父元素和所有的图片项。然后，设置一个计数器变量来跟踪当前显示的图片索引。使用定时器或者requestAnimationFrame()函数来更新图片的位置，产生轮播效果。

const slider = document.querySelector('.slider');
const slides = document.querySelectorAll('.slides li');
let currentIndex = 0;

function nextSlide() {
  currentIndex = (currentIndex + 1) % slides.length;
  updateSlidePosition();
}

function updateSlidePosition() {
  for (let i = 0; i < slides.length; i++) {
    slides[i].style.transform = `translateX(-${currentIndex * 400}px)`;
  }
}

setInterval(nextSlide, 3000);

现在，你的走马灯轮播图就完成了！它会每隔3秒自动切换到下一张图片。