ajax/php/javascript实现每页固定显示三个_javascript实现三个标签页展示数据-优快云博客

HTML代码

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="gb2312">
<title>很多图片的</title>
<script src="jquery-3.0.0/jquery-3.0.0.min.js"></script>
<link href="pagebar.css" rel="stylesheet" type="text/css" />
</head>
<div id="container">
<img id='1' style="height:200px,width:200px"/><p id='2'></p>
<img id='3' style="height:200px,width:200px"/><p id='4'></p>
<img id='5' style="height:200px,width:200px"/><p id='6'></p>
</div>
<script type="text/javascript">
$(function(){
    str=3;
	lastscrollTop=0;
	$.ajax({
                type: "GET", 
                url: 'mpicture.php', 
				dataType: "json", //数据格式:JSON
				data: {'page':str
                },
                success: function (data) {
				path1=eval(data)[0];
				title=eval(data)[2];
				for(i=0;i<3;i++){//这里的3是一页显示多少条
				  a=2*i+1;
				  b=2*i+2;
				  $("#"+a).attr("src",path1[i]);
				  //document.getElementById(b).innerHTML=title[i];
				  }			
				}
			});  
}).scroll(function(){
                var scrollTop = document.body.scrollTop+document.documentElement.scrollTop;//对象最顶端和窗口中可见内容的最顶端之间的距离，这两个值只有一个会生效
				//alert(scrollTop);
				
				if(scrollTop>31||scrollTop<1){
				if(scrollTop>lastscrollTop){
                str=str+1;	}else{str=str-1;}
				lastscrollTop = scrollTop;
				$.ajax({
                type: "GET", 
                url: 'mpicture.php', 
				dataType: "json", //数据格式:JSON
				data: {'page':str
                },
                success: function (data) {
				path1=eval(data)[0];
				title=eval(data)[2];
				for(i=0;i<3;i++){//这里的3是一页显示多少条
				  a=2*i+1;
				  b=2*i+2;
				  $("#"+a).attr("src",path1[i]);
				  //document.getElementById(b).innerHTML=title[i];
				  }			
				}
						});
						//window.scrollTo(0,10);
						//lastscrollTop = 10;
						}  
				})
</script>
</html>

PHP代码

<?php
header('Content-type:text/json;charset=utf-8');
@ $db = mysqli_connect('localhost','root','');
mysqli_select_db($db,'mpicture');//找到数据库mpicture
if(mysqli_connect_errno()){
 echo "Error:Could not connect to mysqli database.";
 exit;
}
$page=$_GET['page'];
if($page==3){
$a=0;
$b=$page;
$p="SELECT * FROM picture limit $a,$b;";//对表picture进行选择
}else{
	$a=($page-3)*3;
	$b=($page-3)*3+3;
	$p="SELECT * FROM picture limit $a,$b;";
}
$q="SELECT count(*) FROM picture";
$result = mysqli_query($db,$p);//执行$p的mysql语句，并赋给result
$result1 = mysqli_query($db,$q);
$row1 = mysqli_fetch_array($result1);
$rownum = mysqli_num_rows($result);//获取result的数据数量
$picture=array(array());
for($i=0;$i<$rownum;$i++){
    $row = mysqli_fetch_assoc($result);//获取result的一条数据
	$picture[0][$i]= $row['path1'];//获得缩略图的路径
	$picture[1][$i]= $row['path2'];//获得全图的路径
	$picture[2][$i]= $row['title'];//获得文字描
	$picture[3][$i]= $row['Id'];
}
$picture[4][0]=$row1[0];
echo json_encode($picture);
?>