请结合给出的素材，实现图中所示的焦点图轮播效果，具体要求如下。 (1)当页面加载完成后，每2秒钟自动切换一张图片； (2)切换图片时，其对应按钮的样式同步变换——背景颜色变为红色； (3)当鼠标悬停在某个按钮上时，显示该按钮对应的图片，且轮播停止。

好的，我可以帮你实现这个功能。首先，你需要一个 HTML 结构，包含轮播图和对应按钮，如下所示：

<div class="slider">
  <img src="image1.jpg" alt="image1">
  <img src="image2.jpg" alt="image2">
  <img src="image3.jpg" alt="image3">
</div>
<div class="slider-buttons">
  <button class="slider-button" data-index="1"></button>
  <button class="slider-button" data-index="2"></button>
  <button class="slider-button" data-index="3"></button>
</div>

其中，`.slider` 为轮播图容器，`.slider-buttons` 为按钮容器，`.slider-button` 为按钮，`data-index` 属性表示对应的图片索引。

接下来，你需要一些 CSS 样式来设置轮播图和按钮的样式，如下所示：

.slider {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
}
.slider img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.slider img.active {
  opacity: 1;
}
.slider-buttons {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.slider-button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  margin: 0 10px;
  background-color: white;
}
.slider-button.active {
  background-color: red;
}

其中，`.slider` 设置为相对定位，宽高为固定值，设置了 `overflow: hidden`，以隐藏超出容器的图片。`.slider img` 设置为绝对定位，位于容器的左上角，并设置了 `opacity: 0`，以隐藏图片。`.slider img.active` 设置了 `opacity: 1`，以显示当前图片。`.slider-buttons` 使用了 flex 布局，居中显示按钮。`.slider-button` 设置为圆形，背景颜色为白色，`.slider-button.active` 的背景颜色为红色。

最后，你需要一些 JavaScript 代码来实现轮播和按钮点击功能，如下所示：

var sliderIndex = 1;
var sliderInterval;

showSlider(sliderIndex);

function showSlider(index) {
  var slides = document.getElementsByClassName("slider")[0].getElementsByTagName("img");
  var buttons = document.getElementsByClassName("slider-button");

  for (var i = 0; i < slides.length; i++) {
    slides[i].classList.remove("active");
  }

  for (var i = 0; i < buttons.length; i++) {
    buttons[i].classList.remove("active");
  }

  slides[index - 1].classList.add("active");
  buttons[index - 1].classList.add("active");
}

function startSlider() {
  sliderInterval = setInterval(function() {
    sliderIndex++;
    if (sliderIndex > 3) {
      sliderIndex = 1;
    }
    showSlider(sliderIndex);
  }, 2000);
}

function stopSlider() {
  clearInterval(sliderInterval);
}

var buttons = document.getElementsByClassName("slider-button");
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function() {
    sliderIndex = parseInt(this.getAttribute("data-index"));
    showSlider(sliderIndex);
    stopSlider();
  });
  buttons[i].addEventListener("mouseover", function() {
    sliderIndex = parseInt(this.getAttribute("data-index"));
    showSlider(sliderIndex);
    stopSlider();
  });
  buttons[i].addEventListener("mouseout", function() {
    startSlider();
  });
}

startSlider();

其中，`sliderIndex` 表示当前显示的图片索引，`sliderInterval` 表示轮播定时器。`showSlider` 函数用于显示指定索引的图片和按钮，先移除所有图片和按钮的 `active` 类，再为对应的图片和按钮添加 `active` 类。`startSlider` 函数用于启动轮播定时器，每 2 秒钟调用 `showSlider` 函数切换图片。`stopSlider` 函数用于停止轮播定时器。最后，使用 `addEventListener` 方法为每个按钮添加点击、鼠标悬停和鼠标离开事件，分别调用 `showSlider` 和 `stopSlider / startSlider` 函数。调用 `startSlider` 函数启动轮播。

这样，你就可以实现图中所示的焦点图轮播效果了。