上下页之间的切换-CSDN博客

本文链接：https://blog.csdn.net/sunny_Destiny/article/details/104492804

今天我们来学习一下如何实现上下页之间的切换，我们先来看一下效果图。

效果图

接下来我们来分析一下！

1.其实也是五个页面叠在一起，默认第一个显示
2.上下页切换，写一个函数，用于实现页面的加减

然后，我们放上代码！

<body>
  <button onclick="showdiv('top')">上一页</button>
  <button onclick="showdiv('down')">下一页</button>
  <div>
    <div id="div1"
      style="width:500px;height:500px;background-color: antiquewhite;position: absolute;top: 50px;left:0px;display: block">
      <p>我是第1页</p>
    </div>
    <div id="div2"
      style="width:500px;height:500px;background-color:rgb(223, 65, 209);position: absolute;top: 50px;left:0px;display: none">
      <p>我是第2页</p>
    </div>
    <div id="div3"
      style="width:500px;height:500px;background-color: rgb(64, 135, 163);position: absolute;top: 50px;left:0px;display: none">
      <p>我是第3页</p>
    </div>
    <div id="div4"
      style="width:500px;height:500px;background-color: rgb(160, 125, 79);position: absolute;top: 50px;left:0px;display: none">
      <p>我是第4页</p>
    </div>
    <div id="div5"
      style="width:500px;height:500px;background-color: rgb(240, 25, 25);position: absolute;top: 50px;left:0px;display: none">
      <p>我是第5页</p>
    </div>
  </div>
</body>
<script>
  let currentPage = 1;  //当前默认在第一页
  function showdiv(changePage) {
    if (changePage === 'top') {
      //向上翻页
      if (currentPage > 1) {
        currentPage--
      }
      else {
        //已经是第一页了，不能再往前翻了
        alert("已经是第一页了，不能再往前翻了")
      }
    }
    else {
      //向下翻页
      if (currentPage === 5) {
        //已经是最后一页了，不能再往后翻了
        alert("已经是最后一页了，不能再往后翻了")
      }
      else {
        currentPage++
      }
    }
    for (var i = 1; i < 6; i++) {
      if (i === currentPage) {
        $("#div" + i).show()
      } else {
        $("#div" + i).hide()
      }
    }
  }
</script>

好了，今天的分享就到这里了！
愿你三冬暖，愿你春不寒；愿你天黑有灯，下雨有伞。