本文介绍了一个使用JS、AJAX和PHP实现的简单新闻轮播系统，该系统包括新闻选项卡布局、动态加载新闻内容及跳转到详情页等功能。
利用js ajax php做的一个小的新闻选项卡，
文件名news_card1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0; padding: 0; border: 0;}
a{
text-decoration: none;
color: #000;
}
.wrap{
height: 380px;
width:30%;
margin: auto;
overflow: hidden;
border: 1px solid #000;
}
ul{
text-align: center;
height: 40px;
}
li{
line-height: 40px;
background-color:dodgerblue;
list-style: none;
text-align: center;
display: inline-block;
width:130px;
color:white;
font-size: 22px;
font-family: "微软雅黑";
border-radius: 10px;
}
li:hover{
color:red;
cursor:hand;
cursor: pointer;
}
.content{
width: 85%;
margin: auto;text-align: left;
}
img{
width: 100%;
height: 110px;
}
figure{
display: inline-block;
width: 45%;
margin-top: 30px;
margin-left: 15px;
text-align: center;
vertical-align:top;
}
figcaption{
font-size: 12px;
}
figure:hover figcaption{
color: #ff5500;
}
p{
margin-top: 50px;
}
p a:hover{
color: #ff5500;
}
.on{
color:red;
cursor:hand;
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li index=0>新闻</li>
<li index=1>科技</li>
<li index=2>军事航空</li>
</ul>
<div class="content">
</div>
</div>
</body>
</html>网页效果大致如下
下面就是js部分了
<script type="text/javascript">
var liList=document.getElementsByTagName('li'); //首先获取li
var content=document.getElementsByClassName('content')[0]; //并且获取内容区域
for(var i=0;i<liList.length;i++){ // 对li进行遍历的到每个li
var _li=liList[i];
_li.onmouseover=function(){ //给每个li一个鼠标移上时的事件
var _obj=this.getAttribute('index'); // 并且得到每个 index值
AJax(_obj); //
}
}
function AJax(_obj){
var xhr=new XMLHttpRequest(); //利用ajax技术向后端发送请求并且接收回来的数据 四部
xhr.open("GET","php/news_card1.php?obj="+_obj,true); //
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){ //对页面状态status和ajax请求状态判断
var str=xhr.responseText; //ajax后台的程序发送xmlhttp请求的时候，后台程序接到请求会进行处理
//处理接收以后，可以返回一串数据给前台，这个就是responsetext
var arr=JSON.parse(str); //因为php用的是Json语法编写 所以需要json解析
var result=""; //接收标签
for(var i=0;i<arr.length;i++){ //对解析出来的arr遍历
var _new=arr[i]; //
var _id=_new["id"]; //
var _title=_new["title"]; //
var _img=_new["img"]; //
if(_obj==0||_obj==2){
result+="<p id=''+_id+''><a href='detail.html?title="+_id+"&bigclassify="+_obj+"' target='_blank'>"+_title+"</a></p>"; //静态网页发送数据也是用的get方法，给新闻网站加上id和obj是区分点开的新闻网页
}else{
result+="<figure id=''+_id+''><a href='detail_img.html?title="+_id+"&bigclassify="+_obj+"' target='_blank'><img src='"+_img+"'><figcaption>"+_title+"</figcaption></a></figure>";
}
}
content.innerHTML=result;
}
}
}
</script>
news_card1.php文件
<?php
$obj=$_GET["obj"];
if($obj=="0"){
echo '[{"id":"001","title":"新闻1"},
{"id":"002","title":"新闻2"},
{"id":"003","title":"新闻3"}]';
}else if($obj=="1"){
echo '[{"id":"001","img":"img/1.jpg","title":"新闻1"},
{"id":"002","img":"img/2.jpg","title":"新闻2"},
{"id":"003","img":"img/3.jpg","title":"新闻3"},
{"id":"003","img":"img/4.jpg","title":"新闻4"}]';
}else if($obj=="2"){
echo '[{"id":"001","title":"新闻1"},
{"id":"002","title":"新闻2"},
{"id":"003","title":"新闻3"}]';
}
?>detail.html文件这个页面是新闻详细页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h1,h3,h4{
text-align: center;
}
p{
width: 80%;
margin: auto;
text-indent:32px;
text-align: justify;
line-height: 2;
}
</style>
</head>
<body>
<h1></h1>
<h3></h3>
<h4></h4>
<p></p>
</body>
</html>js内容
<script type="text/javascript">
var _h1=document.getElementsByTagName('h1')[0];
var _h3=document.getElementsByTagName('h3')[0];
var _h4=document.getElementsByTagName('h4')[0];
var _p=document.getElementsByTagName('p')[0];
//通过url地址获取title 和 bigclassify的值 //获取页面地址并且对地址进行解析，得到 title和bigclassify
var _url=location.href;
var params=_url.split("?")[1]; //title=001&bigclassify=1
var parList=params.split("&");
var _title=parList[0].split("=")[1]; //001
var _bigclassify=parList[1].split("=")[1]; //1
AJax(_title,_bigclassify)
function AJax(_title,_bigclassify){
var xhr=new XMLHttpRequest();
xhr.open("GET","php/detail.php?title="+_title+"&bigclassify="+_bigclassify,true);
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var str=xhr.responseText;
var info=JSON.parse(str);
var _title=info.title;
var _date=info.date;
var _author=info.author;
var _body=info.body;
_h1.innerHTML=_title;
_h3.innerHTML=_date;
_h4.innerHTML=_author;
_p.innerHTML=_body;
}
}
}
</script>detail.php界面
<?php
$title=$_GET["title"];
$bigclassify=$_GET["bigclassify"];
if($bigclassify=="0"){
if($title=="001"){
echo '{"title":"田雨1","date":"2018年02月26日05:00","author":"田雨1","body":"田雨1"}';
}else if($title=="002"){
echo '{"title":"田雨2","date":"2018年02月26日05:00","author":"田雨1","body":"田雨1"}'; }else if($title=="003"){
echo '{"title":"田雨3","date":"2018年02月26日05:00","author":"田雨1","body":"田雨1"}'; }
}else if($bigclassify=="1"){
if($title=="001"){
echo '{"title":"田雨4","date":"2018年02月26日05:00","author":"田雨1","body":"田雨1"}'; }else if($title=="002"){
echo '{"title":"田雨5","date":"2018年02月26日05:00","author":"田雨1","body":"田雨1"}'; }else if($title=="003"){
echo '{"title":"田雨6","date":"2018年02月26日05:00","author":"田雨1","body":"田雨1"}'; }
}else if($bigclassify=="2"){
if($title=="001"){
echo '{"title":"田雨7","date":"2018年02月26日05:00","author":"田雨1","body":"田雨1"}'; }else if($title=="002"){
echo '{"title":"田雨8","date":"2018年02月26日05:00","author":"田雨1","body":"田雨1"}'; }else if($title=="003"){
echo '{"title":"田雨9","date":"2018年02月26日05:00","author":"田雨1","body":"田雨1"}'; }
}
?>图片新闻的详细页面原理和这个一样所以不做详解了
扫一扫
278
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
