banner自动轮播代码

以下是一个简单的基于JavaScript和HTML的自动轮播banner的代码：

HTML：

<div class="banner">
  <img src="img1.jpg" alt="banner1">
  <img src="img2.jpg" alt="banner2">
  <img src="img3.jpg" alt="banner3">
</div>

CSS：

.banner {
  width: 100%;
  height: 400px;
  position: relative;
}

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

JavaScript：

var images = document.querySelectorAll('.banner img');
var current = 0;
var interval = setInterval(nextImage, 3000);

function nextImage() {
  images[current].style.opacity = 0;
  current = (current + 1) % images.length;
  images[current].style.opacity = 1;
}

这个代码将会让banner中的图片自动轮播，每隔3秒钟就会切换到下一张图片。