html+css+js制作网页焦点图

制作网页焦点图可以使用 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;
  overflow: hidden;
  height: 400px;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slider img.active {
  opacity: 1;
}

JavaScript 代码：

// 获取所有图片
const images = document.querySelectorAll('.slider img');

// 设置初始值
let current = 0;
images[current].classList.add('active');

// 定时切换图片
setInterval(() => {
  images[current].classList.remove('active');
  current = (current + 1) % images.length;
  images[current].classList.add('active');
}, 5000);

在上面的示例中，我们使用 CSS 将所有图片定位到容器的左上角，并设置它们的透明度为 0。然后使用 JavaScript 定时切换图片，并为当前图片添加 `active` 类来显示它。这样就可以实现一个简单的网页焦点图了。