mysqli+ajax+php+jquery实现动画轮播图

最新推荐文章于 2022-10-29 12:07:17 发布

spfLinux

最新推荐文章于 2022-10-29 12:07:17 发布

阅读量755

点赞数

分类专栏： php ajax 文章标签： php ajax mysql jquer

本文链接：https://blog.csdn.net/spfLinux/article/details/78571969

版权

php 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

ajax

10 篇文章 0 订阅

订阅专栏

前端：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/test.css">
</head>
<body>
	<!-- 动画轮播 -->
	<a id="ban_a1" class="ban_a">上一页</a>
	<div id="ban_imgs">
		<div id="imgs">
		</div>
	</div>
	<a id="ban_a2" class="ban_a">下一页</a>
	
	<script src="js/jquery.min.js"></script>
	<script>
		//最后实现从数据库中获取
		$(document).ready(function(){
			var currentPage = 1;
			$("#ban_a1").click(function(){
				if(currentPage == 1){
					return;
				}else if(currentPage > 1){
					htmlobj = $.ajax({url:"php/getimg.php?currentPage="+(currentPage-1),async:false});
					console.log(htmlobj.responseText);
					var arr = JSON.parse(htmlobj.responseText);
					var pageInfo = JSON.parse(arr[arr.length-1]);
					var totalPage = Number(pageInfo.totalPage);
					console.log("totalPage"+totalPage);
					$("#imgs").animate({left:'+=200px'});
					currentPage -= 1;
					console.log("currentPage="+currentPage);
				}
				
			});
			$("#ban_a2").click(function(){
				htmlobj = $.ajax({url:"php/getimg.php?currentPage="+(currentPage+1),async:false});
				console.log(htmlobj.responseText);
				var arr = JSON.parse(htmlobj.responseText);
				var pageInfo = JSON.parse(arr[arr.length-1]);
				var totalPage = Number(pageInfo.totalPage);
				console.log("totalPage"+totalPage);
				if(currentPage == totalPage){
					return;
				}else if(currentPage < totalPage){
					$("#imgs").animate({left:'-=200px'});
					currentPage += 1;
					console.log("currentPage="+currentPage);
				}
			});
		});

		function getAllImg() {
			$(document).ready(function(){
				console.log("getPage11");
				htmlobj = $.ajax({url:"php/getAllImg.php",async:false});
				console.log(htmlobj.responseText);
				var arr = JSON.parse(htmlobj.responseText);
				str = "";
				for(var i=0;i<arr.length;i++){
					str += "<a href=\"\"><img src=\"" + arr[i].path + "\" id=\"ban_img1\" class=\"ban_img\"></a>";
					
				}
				$("#imgs").html(str);
			});
		}

		window.onload = function(){
			getAllImg();
		}
	</script>
</body>
</html>

test.css

#ban_imgs {
	width: 200px;
	height: 150px;
	position: relative; /* 必须要加 */
	overflow: hidden;
}
#imgs {
	position: absolute;
	width: 400px;  /* 必须加，不然影响用户体验 */
	font-size: 0;  /* 消除图片之间的空隙 */
	left: 0px;
}
.ban_a {
	cursor: pointer;
}
.ban_img {
	width: 100px;
	height: 150px;
}

后台：

init.php

<?php

	$conn = mysqli_connect("127.0.0.1","root","","test",3306);
	$initsql = "SET NAMES UTF8";
	mysqli_query($conn,$initsql);
?>

getAllImg.php

<?php

	require("init.php");

	$sql = "SELECT * FROM test_img";
	$result = mysqli_query($conn,$sql);

	if($result === false){
		echo "异常，请检查SQL语句";
		echo $sql;
	}else{
		$arr = mysqli_fetch_all($result,1);
		$arr = json_encode($arr);
		echo $arr;
	}
?>

getimg.php

<?php

	require("init.php");

	@$currentPage = $_REQUEST["currentPage"];
	if($currentPage == "" || $currentPage == null){
		$currentPage = 1;
	}
	@$pageSize = $_REQUEST["pageSize"];
	if($pageSize == "" || $pageSize == null){
		$pageSize = 2;
	}
	$sql = "SELECT count(*) FROM test_img";
	$result = mysqli_query($conn,$sql);
	if($result === false){
		echo "异常，请检查SQL语句";
		echo $sql;
	}else{
		$arr = mysqli_fetch_row($result);
		$rowCount = $arr[0];  //考虑rowCount=0?
		//echo "rowCount=" . $rowCount;
		//echo "pageSize=" . $pageSize;
		$totalPage = ceil($rowCount/$pageSize);
		if($currentPage < 1){
			$currentPage = 1;
		}
		if($currentPage > $totalPage){
			$currentPage = $totalPage;
		}
		//echo "currentPage=" . $currentPage;
		$start = ($currentPage - 1) * $pageSize;
		$sql = "SELECT * FROM test_img LIMIT $start,$pageSize";
		$result = mysqli_query($conn,$sql);
		if($result === false){
			echo "异常，请检查SQL语句";
			echo $sql;
		}else{
			$arr = mysqli_fetch_all($result,1);
			$lastStr = "{\"currentPage\":$currentPage,\"totalPage\":$totalPage}"; 
			Array_push($arr,$lastStr);  
			$arr = json_encode($arr);
			echo $arr;
		}
	}

	

?>

本程序在刚开始加载时效率比较低：采取加载了所有的图片的方式，如果轮播图不多，还好，如果很多，建议优化。

spfLinux

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
mysqli+ajax+php+jquery实现动画轮播图

前端： Document 上一页下一页 //最后实现从数据库中获取 $(document).ready(function(){ var currentPage = 1; $("#ban_a1").click(function(){ if(currentPage == 1){ return;
复制链接

扫一扫