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;

}

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

}

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

JS代码实现页面切换效果（上一页+具体页+下一页）
HTML+CSS部分添加所有页面,和上一页.具体页.下一页的按钮, 设置div样式,默认第一页显示,其他页隐藏. <!DOCTYPE html> <html><head ...
js代码实现繁体字切换效果
下载地址使用js代码实现网页上的简体中文和繁体字的切换效果,很实用的繁体字切换插件. dd:
如何通过JavaScript代码实现页面的返回上一页功能的实现
如何通过JavaScript代码实现页面的返回上一页功能的实现作者:张国军_Suger 开发工具与关键技术:JavaScript 很多时候我们需要通过JavaScript代码实现页面的上一页功能,下 ...
【网站架构】为什么我的单页应用这么慢，打开页面需要几分钟？怎样才能用好单页应用？现阶段把整个项目做成一个单页应用真的可行？单页应用的工作原理是什么？
传统的网站会不断跳转页面, 例如单击搜索后会跳转页面,单击翻页后会跳转页面, 而一旦出现跳转页面,用户就需要等待重新加载页面后才能继续操作. 为了改进这种糟糕体验,单页应用的概念逐渐流行, 单页应用指 ...
jsp/html开发中常用的JS代码和页面特效代码
1.jsp/html开发中常用的JS代码 1.后退前进 <input type="button" value="后退" onClick="hi ...
2 行 JS 代码实现页面横向滚动特效
在前端这个无奇不有的世界里,有些网站不是正常垂直滚动的,而是横向滚动的: 那么在没法把鼠标滚轮横过来的前提下(苹果除外),能否实现网页横向滚动呢?我们来写代码试试.先看一下最终效果,这里我用鼠标的滚轮 ...
js代码父页面调用子页面中的js方法，子页面调用父页面中的js方法
文中代码亲测可用,转载以示尊重!!!  <script type="text/javascript"> //调用子页面的方法 ...
来自CSDN的js代码大全,害怕忘了(上)
写道事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.sr ...
html音乐自动播放暂停js,JS实现html页面切换背景音乐不间断网页跳转背景音乐不停止播放...
我们做项目的时候可能会用到需要在整个网站中添加背景音乐. 但如果仅在页面中添加BGSOUND标签来播放音乐的话,当页面切换时,背景音乐就会重新加载,而达不到连贯播放的效果. 为了解决这个问题,我们最常 ...

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

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

最新文章

热门文章