jQuery循环翻页

在使用jQuery时，经常会遇到需要实现循环翻页的需求，例如在一个包含多个页面的网站中，通过点击按钮或滚动到页面底部触发翻页功能。

定义一些HTML结构，用于显示页面内容和触发翻页操作。假设我们有一个包含多个页面的容器，每个页面都具有相同的类名，并且需要一个按钮用于触发翻页功能。以下是一个示例的HTML结构：

代码语言：javascript复制

<div class="page-container">
  <div class="page">Page 1</div>
  <div class="page">Page 2</div>
  <div class="page">Page 3</div>
  <!-- 更多页面... -->
</div>

<button id="next-page">Next Page</button>

在CSS中，你可以根据需要设置.page-container和.page的样式，以适应你的页面布局。

现在，使用jQuery来实现循环翻页的功能。需要监听按钮的点击事件，并在每次点击时更新当前显示的页面。当显示最后一页时，再次点击按钮将回到第一页。

代码语言：javascript复制

$(document).ready(function() {
  var currentPage = 1;
  var totalPages = $('.page').length;

  $('#next-page').on('click', function() {
    // 隐藏当前页面
    $('.page').eq(currentPage - 1).hide();

    // 更新当前页码
    currentPage  ;
    if (currentPage > totalPages) {
      currentPage = 1;
    }

    // 显示下一页
    $('.page').eq(currentPage - 1).show();
  });
});

在上述代码中，我们首先定义了两个变量currentPage和totalPages，分别表示当前显示的页码和总页数。在按钮的点击事件处理程序中，我们隐藏当前页面，然后更新currentPage的值。如果当前页码大于总页数，将currentPage重置为1。最后，我们显示下一页的内容。

通过上述代码，可以实现一个简单的循环翻页功能。每次点击按钮时，当前页面会被隐藏，然后显示下一页的内容。当显示最后一页时，再次点击按钮将回到第一页。

jquery

0 人点赞