前端数字翻页效果

你可以使用 JavaScript 和 CSS 实现数字翻页效果。以下是一个简单的示例：

HTML 代码：

<div class="pagination">
  <span class="prev">Prev</span>
  <span class="num">1</span>
  <span class="num">2</span>
  <span class="num">3</span>
  <span class="num">4</span>
  <span class="num">5</span>
  <span class="next">Next</span>
</div>

CSS 代码：

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}

.num {
  margin: 0 10px;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.num.active {
  color: #fff;
  background-color: #007bff;
  border-radius: 50%;
}

.prev,
.next {
  margin: 0 10px;
  font-size: 20px;
  cursor: pointer;
}

.prev:hover,
.next:hover,
.num:hover {
  color: #007bff;
}

JavaScript 代码：

const nums = document.querySelectorAll('.num');
const prev = document.querySelector('.prev');
const next = document.querySelector('.next');
let currentNum = 1;

function setActiveNum(num) {
  nums.forEach(num => num.classList.remove('active'));
  num.classList.add('active');
}

function goToNum(num) {
  setActiveNum(nums[num - 1]);
  currentNum = num;
}

function goToPrev() {
  if (currentNum > 1) {
    goToNum(currentNum - 1);
  }
}

function goToNext() {
  if (currentNum < nums.length) {
    goToNum(currentNum + 1);
  }
}

prev.addEventListener('click', goToPrev);
next.addEventListener('click', goToNext);
nums.forEach((num, i) => num.addEventListener('click', () => goToNum(i + 1)));

通过以上代码，你就可以实现一个简单的数字翻页效果了。