如何做一个翻页效果的网页

关于说到翻页效果是网页中非常常见的一个交互，可以对网页进行分类和搜索等操作，那么如何做一个翻页效果的网页？本文将介绍如何实现一个基本的翻页效果，一起来看看吧。

如何做一个翻页效果的网页？

1. HTML 结构

首先，我们需要规划好网页的 HTML 结构，可以使用一下代码作为基本结构。

```html
<!DOCTYPE html>
<html>
  <head>
    <title>翻页效果</title>
  </head>
  <body>
    <div id="list">
      <ul>
        <li>
          <a href="#">1</a>
        </li>
        <li>
          <a href="#">2</a>
        </li>
        <li>
          <a href="#">3</a>
        </li>
        <li>
          <a href="#">4</a>
        </li>
        <li>
          <a href="#">5</a>
        </li>
      </ul>
    </div>
    <div id="pagination">
      <ul>
        <li class="prev"><a href="#">上一页</a></li>
        <li><a href="#">1</a></li>
        <li class="active"><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li class="next"><a href="#">下一页</a></li>
      </ul>
    </div>
  </body>
</html>
```

其中，我们使用了一个 `#list` 的容器来存放我们需要翻页的列表，同时提供了下方的 `#pagination` 的容器，用于存放翻页按钮。

2. CSS 样式

在 CSS 的样式中，我们可以定义好列表内容和翻页按钮的样式，这里我们定义了一个 `.active` 的类来表示当前选中页码的样式。

```css
#list {
  margin: 0;
  padding: 0;
}

#list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#list li {
  display: inline-block;
  margin-right: 10px;
  padding: 5px 10px;
  border: 1px solid #ccc;
}

#pagination {
  margin-top: 30px;
}

#pagination ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#pagination li {
  float: left;
}

#pagination li a {
  display: block;
  padding: 5px 10px;
  color: #333;
  text-decoration: none;
}

#pagination li.active a {
  color: #fff;
  background-color: #333;
}

#pagination li.prev,
#pagination li.next {
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
}

#pagination li.prev a,
#pagination li.next a {
  color: #666;
  font-weight: bold;
}
```

3. JavaScript 交互

最后，我们需要编写 JavaScript 交互，主要是通过点击翻页按钮来改变当前的页码，我们可以添加下方的代码，实现翻页效果。

```javascript
// 获取页面元素
var list = document.getElementById('list');
var pagination = document.getElementById('pagination');
var items = list.querySelectorAll('li');
var pageSize = 3; // 每页显示的条目数
var page = 1; // 当前页码

// 显示指定页码的条目，同时更新翻页按钮的样式
function displayPage(page) {
  // 用于存储当前页码的条目
  var pageItems = [];

  // 获取当前页码的条目，同时将其他条目隐藏
  Array.prototype.forEach.call(items, function(item, index) {
    if (Math.floor(index / pageSize) + 1 == page) {
      item.style.display = 'block';
      pageItems.push(item);
    } else {
      item.style.display = 'none';
    }
  });

  // 更新翻页按钮的样式
  Array.prototype.forEach.call(pagination.querySelectorAll('li'), function(item) {
    item.classList.remove('active');
  });

  var current = pagination.querySelectorAll('li a')[page];
  current.parentNode.classList.add('active');
}

// 初始化页面
displayPage(1);

// 添加翻页按钮的点击事件
Array.prototype.forEach.call(pagination.querySelectorAll('li'), function(item, index) {
  item.onclick = function() {
    if (index == 0 && page > 1) {
      page--;
    } else if (index == 6 && page < items.length / pageSize) {
      page++;
    } else if (index > 0 && index < 6) {
      page = index;
    }

    displayPage(page);
  }
});
```

这样，我们就完成了一个基本的翻页效果的网页，具体效果可以查看下方代码运行结果。

标签：