html焦点图轮播

HTML焦点图轮播可以使用CSS和JavaScript来实现。以下是一种常见的实现方法：

首先在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;
  height: 400px;
  overflow: hidden;
}
.slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.slider img.active {
  opacity: 1;
}

这里的样式将容器设置为相对定位，高度为400px，隐藏溢出部分。每个图像都绝对定位，并在开始时设置为不透明度为0，并且有一个0.5秒的渐变过渡效果。最后，`.active`类将在当前图像上设置，使其不透明度为1。

最后，在JavaScript中编写代码来切换图像。这可以使用计时器和类切换来完成，例如：

var slideIndex = 0;
var slides = document.getElementsByClassName("slider")[0].getElementsByTagName("img");

function showSlides() {
  for (var i = 0; i < slides.length; i++) {
    slides[i].classList.remove("active");
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1;
  }
  slides[slideIndex-1].classList.add("active");
  setTimeout(showSlides, 5000); // 切换时间间隔为5秒
}

showSlides();

这里的代码将获取所有图像元素并将它们存储在`slides`数组中。然后，`showSlides`函数将在每5秒钟调用一次，并将`.active`类从所有图像中删除，然后将其添加到下一个图像中。如果已经达到最后一个图像，那么将从第一个图像开始重新开始。

通过这些步骤，就可以创建一个简单的HTML焦点图轮播了。