怎么用原生js写轮播图

原生JavaScript实现轮播图可以通过以下步骤进行：

HTML结构：创建一个包含图片的容器和按钮的HTML结构。

<div id="slider-container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <img src="image4.jpg" alt="Image 4">
  
  <button id="prevBtn">Previous</button>
  <button id="nextBtn">Next</button>
</div>

CSS样式：设置容器的宽度和高度，并为图片和按钮添加样式。

#slider-container {
  width: 500px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

#slider-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

#slider-container img.active {
  display: block;
}

#prevBtn, #nextBtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

#prevBtn {
  left: 10px;
}

#nextBtn {
  right: 10px;
}

JavaScript逻辑：使用JavaScript编写轮播图的逻辑。

// 获取容器和按钮元素
var container = document.getElementById('slider-container');
var prevBtn = document.getElementById('prevBtn');
var nextBtn = document.getElementById('nextBtn');

// 获取所有图片元素
var images = container.getElementsByTagName('img');

// 设置初始索引和定时器
var currentIndex = 0;
var timer;

// 显示当前图片
function showImage(index) {
  // 移除所有图片的active类名
  for (var i = 0; i < images.length; i++) {
    images[i].classList.remove('active');
  }
  
  // 添加当前图片的active类名
  images[index].classList.add('active');
}

// 切换到上一张图片
function prevImage() {
  currentIndex--;
  if (currentIndex < 0) {
    currentIndex = images.length - 1;
  }
  showImage(currentIndex);
}

// 切换到下一张图片
function nextImage() {
  currentIndex++;
  if (currentIndex >= images.length) {
    currentIndex = 0;
  }
  showImage(currentIndex);
}

// 绑定按钮点击事件
prevBtn.addEventListener('click', prevImage);
nextBtn.addEventListener('click', nextImage);

// 自动切换图片
function autoPlay() {
  timer = setInterval(function() {
    nextImage();
  }, 2000);
}

// 开始自动播放
autoPlay();

通过上述步骤，就可以使用原生JavaScript实现一个简单的轮播图。当点击上一张和下一张按钮时，会切换到相应的图片，并自动播放图片。