轮播图数字按钮纯css

可以使用伪类和CSS属性来实现轮播图数字按钮的效果。

首先，创建一个容器来包含轮播图和数字按钮。然后，为每个数字按钮创建一个a标签，并设置一个data属性来标识它们的顺序。例如：

<div class="slider-container">
  <div class="slider"></div>
  <div class="number-buttons">
    <a href="#" data-slide="1"></a>
    <a href="#" data-slide="2"></a>
    <a href="#" data-slide="3"></a>
  </div>
</div>

接下来，为每个数字按钮设置CSS样式，可以使用伪类和CSS属性来实现：

.number-buttons a {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 50%;
  border: 2px solid #ccc;
}

.number-buttons a.active,
.number-buttons a:hover {
  border-color: #333;
}

.number-buttons a:before {
  content: attr(data-slide);
  display: block;
  text-align: center;
  line-height: 10px;
  color: #ccc;
  font-size: 8px;
}

.number-buttons a.active:before {
  color: #333;
}

在上面的代码中，我们使用了伪类:before来添加数字文本标识，并使用data属性来设置按钮的顺序。我们还使用了:hover和.active来设置数字按钮的激活状态。

最后，使用JavaScript来控制轮播图的切换，当轮播图切换时，通过添加或删除.active类来更新数字按钮的状态。

var slider = document.querySelector('.slider');
var numberButtons = document.querySelectorAll('.number-buttons a');

function setActiveButton(index) {
  // Remove active class from all buttons
  numberButtons.forEach(function(button) {
    button.classList.remove('active');
  });
  // Add active class to button at index
  numberButtons[index].classList.add('active');
}

// Add event listeners to number buttons
numberButtons.forEach(function(button, index) {
  button.addEventListener('click', function(event) {
    event.preventDefault();
    // Set active button and slide to corresponding index
    setActiveButton(index);
    slider.style.transform = 'translateX(' + (-100 * index) + '%)';
  });
});

以上就是使用纯CSS实现轮播图数字按钮的方法。