好资源导航 » 文章资讯 » JS代码实现页面切换效果

JS代码实现页面切换效果

2023-07-07 00:31:02 77

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

HTML+CSS部分

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










上一页
1
2
3
4
下一页

js部分

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


//封装函数、图片显示的部分、传入获取到的div，和被点击的序号
functiontoggle(eles,active){
for(vari=eles.length;i--;){
eles[i].className="item";//先让所有div隐藏
}
eles[active].className="itemactive";//再让被点击的序号对应的div显示
}
//获取按键和div
varaBtn=document.getElementsByClassName("btn");
varaIem=document.getElementsByClassName("item");
varprev=document.getElementsByClassName("prev");
varnext=document.getElementsByClassName("next");
varnowPage=0;//定义当前页，默认值为0；

for(vari=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);
}

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

返回顶部
514930285
czq8825@qq.com

JS代码实现页面切换效果

热门推荐

随机推荐