在html中，当一个盒子的内容超出的时候就会出现可以点击的分页器，点击可以切换下一页。用代码表示

要实现点击分页器切换到下一页的效果，需要使用JavaScript来控制分页器的点击事件，并且动态改变盒子内容的显示。

下面是一个示例代码：

<div id="box" style="overflow: hidden; height: 200px;">
  <div class="page" style="width: 200px;">第一页的内容</div>
  <div class="page" style="width: 200px;">第二页的内容</div>
  <div class="page" style="width: 200px;">第三页的内容</div>
</div>
<div id="pager">
  <a href="#" class="active">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
</div>

<script>
  var box = document.getElementById('box');
  var pages = document.getElementsByClassName('page');
  var pager = document.getElementById('pager');
  var links = pager.getElementsByTagName('a');

  var currentPage = 0;
  var pageWidth = pages[0].offsetWidth;

  function showPage(page) {
    var offset = -pageWidth * page;
    box.style.transform = 'translateX(' + offset + 'px)';
    for (var i = 0; i < links.length; i++) {
      links[i].classList.remove('active');
    }
    links[page].classList.add('active');
    currentPage = page;
  }

  for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', function(e) {
      e.preventDefault();
      var page = parseInt(this.innerText) - 1;
      showPage(page);
    });
  }

  showPage(currentPage);
</script>

在这个示例中，我们创建了一个固定高度为`200px`的盒子，并且将`overflow`设置为`hidden`，这样超出盒子高度的内容就会被隐藏起来。然后我们在盒子中创建了三个分页的内容，每个内容的宽度都为`200px`，这样就可以保证每次只显示一个分页的内容。

接下来我们创建了一个分页器，其中包含三个链接，分别对应三个分页的内容。我们使用JavaScript来监听链接的点击事件，然后根据点击的链接来切换到对应的分页内容。

在JavaScript的代码中，我们首先获取了盒子、分页内容和分页器的元素。然后我们定义了一个`showPage`函数，用来显示指定页码的分页内容。这个函数会根据当前页码计算出对应的偏移量，然后通过设置盒子的`transform`属性来改变显示的内容。同时，我们还会更新分页器的样式，将当前页码对应的链接设置为激活状态。

最后，我们在代码的最后调用了`showPage`函数来显示初始的分页内容。