JS代码实现页面切换效果（上一页+具体页+下一页）

最新推荐文章于 2024-06-28 08:01:06 发布

_Adoph

最新推荐文章于 2024-06-28 08:01:06 发布

阅读量8.7w

点赞数 18

分类专栏： js 文章标签：前端页面切换

本文链接：https://blog.csdn.net/weixin_44189739/article/details/85342424

版权

js 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

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="img/1.png" height="1191" width="820" /></div>
			<div class="item"><img src="img/2.png" height="1191" width="820" /></div>
			<div class="item"><img src="img/3.png" height="1191" width="820" /></div>
			<div class="item"><img src="img/4.png" height="1191" width="820" /></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>