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

HTML+CSS部分

添加所有页面，和上一页、具体页、下一页的按钮，

设置div样式，默认第一页显示，其他页隐藏。

.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;

}

上一页

1

2

3

4

下一页

js部分

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

//封装函数、图片显示的部分、传入获取到的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].οnclick=function(){

toggle(aIem,this.tab);

nowPage=this.tab; //被点击后，保存当前页的序号

}

}

//下一页

next[0].onclick = function () {

nowPage++;

nowPage %= aBtn.length;

toggle(aIem,nowPage);

}

//上一页

prev[0].οnclick=function(){

nowPage--;

if(nowPage ==-1){

nowPage = aBtn.length-1;

}

toggle(aIem,nowPage);

}