做一个通知消息的按页切换的通知页面的html+css+js代码

以下是一个简单的通知消息按页切换的通知页面的示例代码：

HTML代码：

<div class="notification-container">
  <div class="notification-page active">
    <h2>Page 1</h2>
    <p>This is notification page 1.</p>
  </div>
  <div class="notification-page">
    <h2>Page 2</h2>
    <p>This is notification page 2.</p>
  </div>
  <div class="notification-page">
    <h2>Page 3</h2>
    <p>This is notification page 3.</p>
  </div>
  <div class="notification-page">
    <h2>Page 4</h2>
    <p>This is notification page 4.</p>
  </div>
  <div class="notification-page">
    <h2>Page 5</h2>
    <p>This is notification page 5.</p>
  </div>
  <div class="notification-page">
    <h2>Page 6</h2>
    <p>This is notification page 6.</p>
  </div>
  <div class="notification-page">
    <h2>Page 7</h2>
    <p>This is notification page 7.</p>
  </div>
</div>
<div class="pagination">
  <button class="prev-btn disabled">&lt;</button>
  <button class="page-btn active">1</button>
  <button class="page-btn">2</button>
  <button class="page-btn">3</button>
  <button class="page-btn">4</button>
  <button class="page-btn">5</button>
  <button class="page-btn">6</button>
  <button class="page-btn">7</button>
  <button class="next-btn">&gt;</button>
</div>

CSS代码：

.notification-container {
  width: 400px;
  height: 200px;
  overflow: hidden;
  position: relative;
}
.notification-page {
  width: 400px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.notification-page.active {
  opacity: 1;
}
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.page-btn {
  background-color: #fff;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  outline: none;
}
.page-btn.active {
  background-color: #ccc;
}
.prev-btn,
.next-btn {
  background-color: #fff;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  outline: none;
}
.prev-btn.disabled,
.next-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

JavaScript代码：

const pages = document.querySelectorAll('.notification-page');
const btns = document.querySelectorAll('.page-btn');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');

let current = 0;

function showPage(pageIndex) {
  pages[current].classList.remove('active');
  pages[pageIndex].classList.add('active');
  btns[current].classList.remove('active');
  btns[pageIndex].classList.add('active');
  current = pageIndex;
  if (current === 0) {
    prevBtn.classList.add('disabled');
  } else {
    prevBtn.classList.remove('disabled');
  }
  if (current === pages.length - 1) {
    nextBtn.classList.add('disabled');
  } else {
    nextBtn.classList.remove('disabled');
  }
}

btns.forEach((btn, index) => {
  btn.addEventListener('click', () => showPage(index));
});

prevBtn.addEventListener('click', () => {
  if (current > 0) {
    showPage(current - 1);
  }
});

nextBtn.addEventListener('click', () => {
  if (current < pages.length - 1) {
    showPage(current + 1);
  }
});

代码中使用了一个容器 `notification-container` 来包含所有的通知页面，每个页面使用 `notification-page` 类名来标识，并且使用 `active` 类名来显示当前页面。同时，使用一个分页器 `pagination` 来切换通知页面，每个页面对应一个 `page-btn` 按钮，并且使用 `active` 类名来标识当前选中的页面。另外，还有两个分别用于切换到上一页和下一页的按钮 `prev-btn` 和 `next-btn`。

在 JavaScript 代码中，首先获取所有的通知页面和按钮元素，并且设置一个变量 `current` 来记录当前显示的通知页面的索引。然后定义一个 `showPage` 函数来切换通知页面和更新分页器的状态，并且在按钮元素上添加点击事件监听器来触发 `showPage` 函数。最后，还需要在上一页和下一页的按钮上添加点击事件监听器来切换通知页面。