一.html
<ul class="new-list">
</ul>
<div class="btns">
<button class="prev">上一页</button>
<button class="next">下一页</button>
</div>
二.css
*{
padding:0;
margin:0;
list-style:none;
}
a{
text-decoration: none;
}
.clearfix::after{
content: "";
clear: both;
display: block;
width:0;
height: 0;
}
.new-list,.btns{
width:500px;
margin:50px auto;
}
.new-list li{
border-bottom: 1px solid gainsboro;
padding:20px 0;
}
.new-list li:last-child{
border-bottom:none;
}
.new-list li img{
float: left;
width: 100px;
margin-right: 10px;
}
.news-dec p{
color:gainsboro;
}
i{
color: red;
}
三.script
var pageNums=1;
getList(pageNums)
// 点击下一页
$(".next").click(function(){
pageNums++
getList(pageNums)
})
// 点击上一页
$(".prev").click(function(){
if(pageNums===1){
alert("已经是首页了")
}
pageNums--
getList(pageNums)
})
// 函数封装
function getList(pageNums){
$.ajax({
url:"https://api.apiopen.top/getJoke",
method:"POST",
data:{
page:pageNums,
count:5,
},
success:function(res){
console.log(res);
if(res.code===200){
$(".new-list").html("")
for(var i=0;i<res.result.length;i++){
var item=res.result[i]
var str='<li class="clearfix">'+
'<img src="'+item.thumbnail+'" alt="断网了">'+
'<div class="news-dec">'+
' <a target="_blank" href="./详情.html?id='+item.sid+'"><h3>'+item.text +'</h3></a>'+
' <p>'+item.passtime+'</p>'+
'<i>类型:'+item.type +'</i>'+
' </div>'+
' </li>'
$(".new-list").append(str)
}
}else{
alert(res.massage)
}
}
})
}
更多推荐
jq实现新闻列表上一页下一页及详情页
发布评论