您的位置：首页技术文章
文章详情页

JS代码实现页面切换效果

浏览：78日期：2024-04-08 14:48:32

本文实例为大家分享了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 >上一页</button> <button class='btn'>1</button> <button class='btn'>2</button> <button class='btn'>3</button> <button class='btn'>4</button> <button >下一页</button> </div> <div> <div class='item active'><img src='https://www.haobala.com/bcjs/img/1.png' /></div> <div class='item'><img src='https://www.haobala.com/bcjs/img/2.png' /></div> <div class='item'><img src='https://www.haobala.com/bcjs/img/3.png' /></div> <div class='item'><img src='https://www.haobala.com/bcjs/img/4.png' /></div> </div> </body></html>

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
上一条：JS removeAttribute()方法实现删除元素的某个属性下一条：js用正则表达式筛选年月日的实例方法
相关文章：
1. IIS Express 取代 ASP.NET Development Server的配置方法2. Spring-Richclient 0.1.0 发布3. Express 框架中使用 EJS 模板引擎并结合 silly-datetime 库进行日期格式化的实现方法4. IntelliJ IDEA设置条件断点的方法步骤5. IntelliJ Idea2017如何修改缓存文件的路径6. Intellij IDEA 旗舰版创建 Spring MVC 项目踩过的坑7. Python使用oslo.vmware管理ESXI虚拟机的示例参考8. Jsp中request的3个基础实践9. python flask框架快速入门10. 浅谈SpringMVC jsp前台获取参数的方式 EL表达式
排行榜
IIS Express 取代 ASP.NET Development Server的配置方法
IIS Express 取代 ASP.NET Development Server的配置方法
1. Express 框架中使用 EJS 模板引擎并结合 silly-datetime 库进行日期格式化的实现方法
2. IntelliJ IDEA设置条件断点的方法步骤
3. IntelliJ Idea2017如何修改缓存文件的路径
4. Spring-Richclient 0.1.0 发布
5. Spring应用抛出NoUniqueBeanDefinitionException异常的解决方案
6. Intellij IDEA 旗舰版创建 Spring MVC 项目踩过的坑
7. Java构建JDBC应用程序的实例操作
8. python flask框架快速入门
9. Jsp中request的3个基础实践
10. 浅谈SpringMVC jsp前台获取参数的方式 EL表达式
热门标签