简单banner轮播js

以下是一个简单的 banner 轮播的 JavaScript 代码：

HTML 代码：

<div id="banner">
  <img src="img1.jpg" alt="banner 1">
  <img src="img2.jpg" alt="banner 2">
  <img src="img3.jpg" alt="banner 3">
</div>

CSS 代码：

#banner {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

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

#banner img.active {
  opacity: 1;
  z-index: 1;
}

JavaScript 代码：

var images = document.getElementsByTagName('img');
var index = 0;

function showImage() {
  images[index].classList.add('active');
}

function hideImage() {
  images[index].classList.remove('active');
}

function nextImage() {
  hideImage();
  index = (index + 1) % images.length;
  showImage();
}

showImage();

setInterval(nextImage, 5000);

在这个示例中，我们使用了一个 div 包含了多个 img 标签，通过设置 CSS 的 position 和 overflow 属性来实现轮播的效果。我们还定义了一个 active 类来控制当前显示的图片的显示和隐藏。

JavaScript 代码中，我们首先获取了所有的 img 标签，并且定义了三个函数：showImage、hideImage 和 nextImage。showImage 函数用于显示当前图片，hideImage 函数用于隐藏当前图片，nextImage 函数用于显示下一张图片。我们还使用了 setInterval 函数来定时调用 nextImage 函数，实现图片的轮播效果。