实现焦点轮播图的效果，有01.jpg，02.jpg，03.jpg三张图片，要求如下：1.当页面加载完成后，每2秒自动切换一张图片，2.切换图片时，其对应按钮的样式同步变换——背景颜色变成红色，3.当鼠标悬停在某个按钮上时，显示该按钮对应的图片且轮播停止

实现焦点轮播图的效果可以通过以下步骤：

1. 在HTML中创建图片和按钮的容器结构，如下所示：

<div class="slider">
  <ul class="slider-list">
    <li><img src="01.jpg"></li>
    <li><img src="02.jpg"></li>
    <li><img src="03.jpg"></li>
  </ul>
  <div class="slider-buttons">
    <span class="slider-button"></span>
    <span class="slider-button"></span>
    <span class="slider-button"></span>
  </div>
</div>

2. 在CSS中设置容器和图片的样式，如下所示：

.slider {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
}
.slider-list {
  position: absolute;
  left: 0;
  top: 0;
  width: 1800px;
  height: 400px;
}
.slider-list li {
  float: left;
  width: 600px;
  height: 400px;
}
.slider-button {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
}
.slider-button.active {
  background-color: #f00;
}

3. 在JavaScript中编写代码实现轮播效果，如下所示：

var slider = document.querySelector('.slider');
var sliderList = document.querySelector('.slider-list');
var sliderItems = sliderList.children;
var sliderButtons = document.querySelectorAll('.slider-button');
var currentSlide = 0;
var intervalId = null;

function showSlide(index) {
  sliderList.style.left = -index * 600 + 'px';
  for (var i = 0; i < sliderButtons.length; i++) {
    if (i === index) {
      sliderButtons[i].classList.add('active');
    } else {
      sliderButtons[i].classList.remove('active');
    }
  }
}

function startSlide() {
  intervalId = setInterval(function() {
    currentSlide = (currentSlide + 1) % sliderItems.length;
    showSlide(currentSlide);
  }, 2000);
}

function stopSlide() {
  clearInterval(intervalId);
}

for (var i = 0; i < sliderButtons.length; i++) {
  sliderButtons[i].addEventListener('mouseover', function() {
    var index = Array.prototype.indexOf.call(sliderButtons, this);
    showSlide(index);
    stopSlide();
  });
  sliderButtons[i].addEventListener('mouseout', function() {
    startSlide();
  });
}

startSlide();

以上代码实现了对焦点轮播图的要求。具体来说：

1. 通过`querySelector`和`querySelectorAll`获取需要操作的DOM元素。
2. 定义一个`currentSlide`变量表示当前显示的图片索引，以及一个`intervalId`变量表示定时器ID。
3. 定义`showSlide`函数用于显示指定索引的图片，并且设置对应按钮的样式。
4. 定义`startSlide`函数用于启动自动轮播，每2秒切换一张图片。
5. 定义`stopSlide`函数用于停止自动轮播。
6. 使用`addEventListener`为每个按钮绑定`mouseover`和`mouseout`事件，实现当鼠标悬停在某个按钮上时，显示该按钮对应的图片且轮播停止的效果。
7. 在页面加载完成后调用`startSlide`函数启动自动轮播。