HTML 轮播图自动轮换实现教程

要让轮播图自己轮换，可以使用 JavaScript 的定时器功能来实现。具体步骤如下：

1. 在 HTML 中创建轮播图的容器和图片，如下所示：
2. 在 CSS 中设置轮播图的样式，如下所示：

.slideshow-container {
  position: relative;
  height: 300px;
  width: 100%;
  overflow: hidden;
}

.mySlides {
  display: none;
  height: 100%;
  width: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
  

3. 在 JavaScript 中编写轮播图自动切换的代码，如下所示：

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName('mySlides');
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = 'none';
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1;
  }
  slides[slideIndex-1].style.display = 'block';
  setTimeout(showSlides, 3000); // 切换间隔时间为3秒
}
  

4. 最后在 HTML 中引入 JavaScript 文件即可。

这样就可以让轮播图自动轮换了。