用原生js，css，html写一个轮播图

好的，以下是一个简单的轮播图的HTML、CSS和JavaScript代码：

HTML代码：

<div class="carousel">
  <div class="slide">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="slide">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <div class="slide">
    <img src="image3.jpg" alt="Image 3">
  </div>
</div>

CSS代码：

.carousel {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slide.active {
  opacity: 1;
}

JavaScript代码：

const slides = document.querySelectorAll('.slide');
let currentSlide = 0;

function nextSlide() {
  slides[currentSlide].classList.remove('active');
  currentSlide = (currentSlide + 1) % slides.length;
  slides[currentSlide].classList.add('active');
}

setInterval(nextSlide, 3000);

这里的轮播图采用了绝对定位和透明度过渡来实现图片的切换。JavaScript代码中使用setInterval函数定时切换图片，每隔3秒执行一次nextSlide函数，该函数会将当前图片的active类删除，然后将currentSlide指向下一张图片，最后给下一张图片添加active类。