帮我写一段轮播图代码 并运行

以下是一个简单的轮播图代码，你可以根据自己的需要进行修改和优化：

HTML 代码：

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

CSS 代码：

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

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

.slider img.active {
  opacity: 1;
}

.slider img.last-active {
  opacity: ;
}

JavaScript 代码：

var slider = document.querySelector('.slider');
var images = document.querySelectorAll('.slider img');
var current = ;
var timer;

function reset() {
  for (var i = ; i < images.length; i++) {
    images[i].classList.remove('active');
    images[i].classList.remove('last-active');
  }
}

function startSlide() {
  reset();
  images[current].classList.add('active');
  if (current === ) {
    images[images.length - 1].classList.add('last-active');
  } else {
    images[current - 1].classList.add('last-active');
  }
}

function slide() {
  startSlide();
  current++;
  if (current === images.length) {
    current = ;
  }
}

timer = setInterval(slide, 300);

你可以将上述代码复制到一个 HTML 文件中，并将图片文件命名为 image1.jpg、image2.jpg 和 image3.jpg，然后在浏览器中打开该 HTML 文件，就可以看到一个简单的轮播图效果了。