网络编程 
首页 > 网络编程 > 浏览文章

JS代码实现页面切换效果

(编辑:jimmy 日期: 2024/12/26 浏览:3 次 )

本文实例为大家分享了JS代码实现页面切换效果的具体代码,供大家参考,具体内容如下

HTML+CSS部分

添加所有页面,和上一页、具体页、下一页的按钮,
设置div样式,默认第一页显示,其他页隐藏。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
  .item {
  display: none;
  width: 300px;
  height: 400px;
  overflow: hidden;
  position: relative;
  }  
  .item>img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  } 
  .item.active {
  display: block;
  }
 </style>
 </head>
 <body>
 <div>
  <button class="prev" >上一页</button>
  <button class="btn">1</button>
  <button class="btn">2</button>
  <button class="btn">3</button>
  <button class="btn">4</button>
  <button class="next" >下一页</button>
 </div>
 <div>
  <div class="item active"><img src="/UploadFiles/2021-04-02/1.png">

js部分

通过按键来实现页面的功能

<script type="text/javascript">
 //封装函数、图片显示的部分、传入获取到的div,和被点击的序号
 function toggle(eles, active) {
  for(var i = eles.length; i--;) {
   eles[i].className = "item"; //先让所有div隐藏
  }
  eles[active].className = "item active";//再让被点击的序号对应的div 显示
  }
  //获取按键和div
  var aBtn = document.getElementsByClassName("btn");
  var aIem = document.getElementsByClassName("item");
  var prev = document.getElementsByClassName("prev");
  var next = document.getElementsByClassName("next");
  var nowPage = 0; //定义当前页,默认值为0;
    
  for(var i = aBtn.length; i--;) {
   aBtn[i].tab = i;
   aBtn[i].onclick=function(){
   toggle(aIem,this.tab);
   nowPage=this.tab; //被点击后,保存当前页的序号
   }
  }
   //下一页
  next[0].onclick = function () {  
   nowPage++;   
   nowPage %= aBtn.length;
   toggle(aIem,nowPage);
  }
  //上一页
  prev[0].onclick=function(){
  nowPage--;
  if(nowPage ==-1){
   nowPage = aBtn.length-1;
  }
 toggle(aIem,nowPage);  
 }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

上一篇:JavaScript canvas实现文字时钟
下一篇:原生JavaScript实现购物车
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 站点导航 SiteMap