js实现下一页页码效果

网络编程 2024/11/15 佚名

3 2 1

效果图：

代码如下：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title></title>
 <style>
  *{
  margin: 0;
  padding: 0;
  }
  .scroll-tool{
  position: relative;
  height: 56px;
  padding: 12px 160px;
  background-color: #f9f9f9;
  }
  .st-con{
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  padding: 12px 0;
  width: 680px;
  margin: 0 auto;
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
  }
  .st-con .img-page{
  font-size: 0;
  }
  a{
  text-decoration: none;
  }
  .st-con a.selected{
  background-color: #d3a12a;
  }
  .st-con a{
  font-size: 14px;
  display: inline-block;
  width: 30px;
  height: 30px;
  color: #fff;
  border-radius: 3px;
  background-color: #44c6ea;
  margin: 0 5px;
  }
  html,body{
  background: #f0f0f0;
  font: 14px/2 "微软雅黑";
  }
  header{
  width: 680px;
  height: 50px;
  margin: 50px auto;
  }
  header div{
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 30px;
  color: #999;
  }
 </style>
 </head>
 <body>
 <header>
  <div>
  简约下一页页码效果
  </div>
 </header>
 <div class="scroll-tool">
  <div class="st-con">
  <div class="img-page">
   <a href="javacript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="selected"><span>1</span></a>
   <a href="javacript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>2</span></a>
   <a href="javacript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>3</span></a>
   <a href="javacript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>4</span></a>
                    <a href="javacript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>5</span></a>
      <a href="javacript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>6</span></a>
  </div>
  </div>
 </div>
 <script src="/UploadFiles/2021-04-02/jquery-1.12.4.min.js">

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

js实现页码显示,js实现页码翻页,js实现上一页下一页

标签：