一种现代动画分页控制指示器，由一系列点和圆形条组成，用jQuery和CSS/CS3编写。

如何使用它:

1.向分页控件添加按钮。

<div class="button active"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<!-- More Buttons Here -->

2.设置分页按钮的样式。

.button {
  background-color: #fff;
  width: 20px;
  height: 20px;
  float: left;
  margin-right: 20px;
  border-radius: 20px;
  cursor: pointer;
  transition: 0.3s ease width;
}

.button:last-child {
  margin-right: 0;
}

.button.active {
  width: 60px;
  cursor: auto;
}

3.在文档末尾加载最新的jQuery库。

<script src="/path/to/cdn/jquery.slim.min.js"></script>

4.在内容之间切换时，将点变形为圆形条（表示当前页面）。

$(function () {
  var button = $(".button");
  function switchToNext() {
    var _this = $(this);
    if (_this.hasClass("active")) {
      return false;
    } else {
      $(".button.active").removeClass("active");
      _this.addClass("active");
    }
  }
  button.on("click", switchToNext);
});

预览截图

jQuery和CSS3 变形寻呼指示符