網頁上如何用js翻頁（html中翻頁的頁面怎麼做）

本文目錄一覽：

1、網頁設計中頁面默認為第二頁,如何用js實現點擊上一頁跳轉到第一頁,點擊下一頁跳轉
2、利用js代碼實現WEB網站鍵盤左右翻頁，如下代碼，怎麼實現在頁面已經是第1頁的時候禁止左翻頁？
3、如何用js做翻頁效果

網頁設計中頁面默認為第二頁,如何用js實現點擊上一頁跳轉到第一頁,點擊下一頁跳轉

純js實現分頁方法一：

廢話不多說，直接上代碼了！

註：本項目是全程使用js來寫的，前台的數據通過ajax進行獲取，然後再進行拼裝，動態載入到頁面。

1.先把上一頁，下一頁等的代碼附上(裡面的值都是偽值，下面會在js里進行重新賦值的！)

ul class=”page” id=”page”

li id=”shouye” class=”p-prev disabled”

a href=’javascript:indexpage(1);’首頁/a

/li

li id=”shangyiye” class=”p-prev disabled”

a href=’javascript:indexpage(-1);’i/i上一頁/a

/li

li a id=”one” href=”javascript:void(0);” 1/a/li

lia id=”two” href=”javascript:void(0);” 2/a/li

lia id=”three” href=”javascript:void(0);” 3/a/li

li class=”more”a id=”five” href=”javascript:void(0);” …/a/li

lia id=”fore” href=”javascript:void(0);” 13855/a/li

li class=’p-next’

a href=’javascript:indexpage(-3);’ onclick=”jumpToPage(‘2′,’/goods/ajaxqueryGoodsList.do.html’,”,’goodsListContainer’,’13855′, listPageCallback);”下一頁i/i/a

/li

li id=”weiye” class=’p-next’

a href=’javascript:void(0);’ onclick=”indexpage(0);”尾頁/a

/li

li class=”total”

span id=”span_number”共13855頁到第input type=”text” id=”input_number” class=”page-txtbox” /頁

input name=”” value=”確定” type=”button” onclick=”jumpToPage(jQuery(‘#input_number’).val(),’/goods/ajaxqueryGoodsList.do.html’,”,’goodsListContainer’,’13855′, listPageCallback);” class=”page-btn”/

/span

/li

/ul

2.首先在頁面放兩個隱藏域，一個是當前頁碼，一個是總頁碼，總頁碼是頁面載入完，從後台查詢出來後直接附上值的，當前頁碼是沒操作一個，就要對當前頁碼賦值

input id=”jiazai” type=”hidden” /input!– 當前頁碼 —

input id=”totalpage” type=”hidden” /input!– 總頁碼 —

3.寫一個頁面載入完的function，給總頁碼和當前頁碼賦值

$(function(){

$(‘#jiazai’).val(1);//給當前頁碼進行賦值，默認為第一頁

ajaxfunction(page,arg,chipssort,”);//這個方法是抽取的ajax後台訪問的方法

});

4.抽取的ajax方法，此頁面會用到好幾次這個方法，所有把它收取了出來，因為頁面的數據時通過ajax從後台獲取到的，後台返回的是一個List集合

//抽取ajax的方法

function ajaxfunction(page,arg,chipssort,fontval){

$.ajax({

type:’POST’,

url:’/admin/receptionchips/showlist’,//請求的url地址

data:{

page:page,

sort:arg,

chipssort:chipssort,

fontval:fontval

dataType:’json’,

contentType:’application/x-www-form-urlencoded; charset=utf-8′,

success:function(data){

//返回值在進行訪問抽取的方法，從後台返回

commonfunction(data);

}

});

}

5.代碼看到這也不是很多，最後一個了

//抽取拼串的方法

function commonfunction(data){

$(‘#projectlist’).find(“li”).remove();

for (var i=0;idata.length;i++ )

{

/*****因為此頁面是動態載入的，這裡主要就是進行拼串，代碼也不少，就不漏出來占空間了*****/br

}br//開始是分頁的核心了

if(data.length0){

//設置頁碼

var pading = data[0].padingnum;//總頁碼

$(‘#totalpage’).val(pading);

var page = $(‘#jiazai’).val();//當前頁

$(‘#countpage’).html(“b id=’currentPageNo'”+page+”/b/”+pading+””);

$(‘#span_number’).html(“共”+pading+”頁到第input type=’text’ id=’input_number’ class=’page-txtbox’ /頁input name=” value=’確定’ type=’button’ onclick=’indexpage(-2)’/goods/ajaxqueryGoodsList.do.html’,”,’goodsListContainer’,'”+pading+”‘, listPageCallback);’ class=’page-btn’/”)

}else{

$(‘#countpage’).html(“b id=’currentPageNo'”+0+”/b/”+0+””);

}

//設置分頁的底部就是首頁 1 2 3 4 5 6 尾頁

var pading = data[0].padingnum;//總頁碼href=”javascript:void(0);”

var nowpage = $(‘#jiazai’).val();//當前頁

//one two three five forebr//下面代碼看著是比較麻煩，但是也不難理解全是一樣的代碼，只不過是加了些判斷

if(nowpage5 ){

$(‘#one’).text(1);

$(‘#one’).attr(‘href’,’javascript:pagenum(“‘+1+'”);’);

$(‘#two’).text(2);

$(‘#two’).attr(‘href’,’javascript:pagenum(“‘+(2)+'”);’);

$(‘#three’).text(3);

$(‘#three’).attr(‘href’,’javascript:pagenum(“‘+(3)+'”);’);

$(‘#five’).text(4);

$(‘#five’).attr(‘href’,’javascript:pagenum(“‘+(4)+'”);’);

$(‘#fore’).text(5);

$(‘#fore’).attr(‘href’,’javascript:pagenum(“‘+(5)+'”);’);

$(‘#five’).parent().show();

$(‘#fore’).parent().show();

}else{

//alert(“已經不是第五頁了”);

//設置中間的為當前頁

$(‘#one’).text(Number(nowpage)-2);

$(‘#one’).attr(‘href’,’javascript:indexpage(“‘+(Number(nowpage)-2)+'”);’);

$(‘#two’).text(Number(nowpage)-1);

$(‘#two’).attr(‘href’,’javascript:indexpage(“‘+(Number(nowpage)-1)+'”);’);

$(‘#three’).text(nowpage);

$(‘#three’).attr(‘href’,’javascript:indexpage(“‘+(nowpage)+'”);’);

$(‘#five’).parent().show();

$(‘#fore’).parent().show();

//判斷下一頁是否超過了總頁數

if(Number(nowpage)+1pading){

$(‘#five’).parent().hide();

$(‘#fore’).parent().hide();

}else{

$(‘#five’).parent().show();

$(‘#five’).text(Number(nowpage)+1);

$(‘#five’).attr(‘href’,’javascript:indexpage(“‘+(Number(nowpage)+1)+'”);’);

}

//判斷下一頁的第二頁是否超過了總頁數

if(Number(nowpage)+2pading){

$(‘#fore’).parent().hide();

}else{

$(‘#fore’).parent().show();

$(‘#fore’).text(Number(nowpage)+2);

$(‘#fore’).attr(‘href’,’javascript:indexpage(“‘+(Number(nowpage)+2)+'”);’);

}

//如果總頁數小於5，這塊代碼主要就是設置 1 2 3 4 5 這些的顯示和隱藏的

if(pading==0){

$(‘#one’).parent().hide();

$(‘#two’).parent().hide();

$(‘#three’).parent().hide();

$(‘#five’).parent().hide();

$(‘#fore’).parent().hide();

}else if(pading==1){

$(‘#shouye’).hide();

$(‘#weiye’).hide();

$(‘#one’).parent().hide();

$(‘#two’).parent().hide();

$(‘#three’).parent().hide();

$(‘#five’).parent().hide();

$(‘#fore’).parent().hide();

}else if(pading==2){

$(‘#one’).parent().show();

$(‘#two’).parent().show();

$(‘#three’).parent().hide();

$(‘#five’).parent().hide();

$(‘#fore’).parent().hide();

}else if(pading==3){

$(‘#one’).parent().show();

$(‘#two’).parent().show();

$(‘#three’).parent().show();

$(‘#five’).parent().hide();

$(‘#fore’).parent().hide();

}else if(pading==4){

$(‘#one’).parent().show();

$(‘#two’).parent().show();

$(‘#three’).parent().show();

$(‘#five’).parent().show();

$(‘#fore’).parent().hide();

}else{

$(‘#one’).parent().show();

$(‘#two’).parent().show();

$(‘#three’).parent().show();

$(‘#five’).parent().show();

$(‘#fore’).parent().show();

}

//設置高亮顯示的，就是是第一頁時，1亮，第二頁時 2亮

$(‘#page a’).each(function() {

$(this).parent().removeClass(“current”);

if($(this).text()==nowpage){

$(this).parent().addClass(“current”);

}

});

//分頁完返回頁面頂端

$(“html,body”).animate({scrollTop:0}, 500);

//最後，給當前頁碼加1

$(‘#jiazai’).val(Number(bianlaing)+Number(1));

}

純js實現分頁方法二：

function goPage(pno,psize){

var itable = document.getElementById(“idData”);

var num = itable.rows.length;//表格行數

var totalPage = 0;//總頁數

var pageSize = psize;//每頁顯示行數

if((num-1)/pageSize parseInt((num-1)/pageSize)){

totalPage=parseInt((num-1)/pageSize)+1;

}else{

totalPage=parseInt((num-1)/pageSize);

}

var currentPage = pno;//當前頁數

var startRow = (currentPage – 1) * pageSize+1;//開始顯示的行

var endRow = currentPage * pageSize+1;//結束顯示的行

endRow = (endRow num)? num : endRow;

//前三行始終顯示

for(i=0;i1;i++){

var irow = itable.rows[i];

irow.style.display = “block”;

}

for(var i=1;inum;i++){

var irow = itable.rows[i];

if(i=startRowiendRow){

irow.style.display = “block”;

}else{

irow.style.display = “none”;

}

var pageEnd = document.getElementById(“pageEnd”);

var tempStr = “”;

if(currentPage1){

tempStr += “a href=”/” mce_href=”/””#/” onmouseout=’MM_swapImgRestore()’ onmouseover=/”MM_swapImage(‘Image69′,”,’images/back_buttom01_dowm.jpg’,1)/” onClick=/”goPage(“+(currentPage-1)+”,”+psize+”)/”img src=”/” mce_src=”/””images/back_buttom01.jpg/” name=’Image69′ width=’38’ height=’15’ border=’0′ id=’Image69′ //a “

}else{

tempStr += “a href=”/” mce_href=”/””#/” onmouseout=’MM_swapImgRestore()’ onmouseover=/”MM_swapImage(‘Image69′,”,’images/back_buttom01_dowm.jpg’,1)/”img src=”/” mce_src=”/””images/back_buttom01.jpg/” name=’Image69′ width=’38’ height=’15’ border=’0′ id=’Image69′ //a “;

}

for (var i = 1; i = totalPage; i++) {

if (i == currentPage) {

tempStr += i+” “;

} else {

tempStr += “a href=”/” mce_href=”/””#/” onClick=/”goPage(“+(i)+”,”+psize+”)/””+i+”/a “

}

if(currentPagetotalPage){

tempStr += “a href=”/” mce_href=”/””#/” onmouseout=/”MM_swapImgRestore()/” onmouseover=/”MM_swapImage(‘Image68′,”,’images/next_buttom01_dowm.jpg’,1)/” onClick=/”goPage(“+(currentPage+1)+”,”+psize+”)/”img src=”/” mce_src=”/””images/next_buttom01.jpg/” name=’Image68′ width=’38’ height=’15’ border=’0′ id=’Image68′ //a “;

}else{

tempStr += “a href=”/” mce_href=”/””#/” onmouseout=/”MM_swapImgRestore()/” onmouseover=/”MM_swapImage(‘Image68′,”,’images/next_buttom01_dowm.jpg’,1)/”img src=”/” mce_src=”/””images/next_buttom01.jpg/” name=’Image68′ width=’38’ height=’15’ border=’0′ id=’Image68′ //a “;

}

tempStr +=”a href=”/” mce_href=”/””#top/” onmouseout=/”MM_swapImgRestore()/” onmouseover=/”MM_swapImage(‘Image20′,”,’images/top_buttom01_dowm.jpg’,1)/”img src=”/” mce_src=”/””images/top_buttom01.jpg/” name=’Image20′ width=’38’ height=’15’ border=’0′ id=’Image20′ //a”;

document.getElementById(“barcon”).innerHTML = tempStr;

}

var base=’%=base%’;

window.onload = function(){

goPage(1,10);

}

div id=”barcon” name=”barcon”/div

溫馨提示：js代碼中上一頁下一頁定義的圖片根據自己需求可以改的

利用js代碼實現WEB網站鍵盤左右翻頁，如下代碼，怎麼實現在頁面已經是第1頁的時候禁止左翻頁？

判斷一下是不是小於0或者大於100就可以了呀

if (event.keyCode==37(prevpage-1)0) location=prevpage;//向左

if (event.keyCode==39(prevpage+1)=100) location=nextpage;//向右

如何用js做翻頁效果

參考代碼如下：

!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”

html xmlns=””

head

title/title

script type=”text/javascript” language=”javascript” src=””/script

script type=”text/javascript” language=”javascript”

$(function() {

$(“#right”).click(function() {

var roll = $(“div/div”, { css: { position: “absolute”, border: “solid 1px #999”, left: “806px”, top: “10px”, height: “494px”, width: “1px”, background: “#fff”}}).appendTo($(“#book”).parent());

$(roll).animate({

left: “10px”,

width: “398px”

}, 1000, function() {

$(“#left”).css({“background”:”#fff”});

$(roll).fadeOut(300, function() {

$(roll).remove();

})

});

/script

/head

body style=”padding:5px;margin:0;”

div id=”book” style=”width:797px;height:494px;background:#ccc;border:solid 6px #ccc;”

div id=”left” style=”width:398px;height:494px;float:left;background:url() no-repeat top left;cursor:pointer;”/div

div id=”right” style=”width:398px;height:494px;float:left;background:#fff;cursor:pointer;margin-left:1px;text-align:right;”p style=”margin-top:470px;font-size:12px;color:#999;”點這翻頁 /p/div

/div

/body

/html

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/230280.html

網頁上如何用js翻頁（html中翻頁的頁面怎麼做）

本文目錄一覽：

網頁設計中頁面默認為第二頁,如何用js實現點擊上一頁跳轉到第一頁,點擊下一頁跳轉

利用js代碼實現WEB網站鍵盤左右翻頁，如下代碼，怎麼實現在頁面已經是第1頁的時候禁止左翻頁？

如何用js做翻頁效果

相關推薦

發表回復