jquery新闻列表
时间: 2024-01-11 17:05:18 浏览: 31
以下是一个使用jQuery创建新闻列表的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>jQuery新闻列表</title>
<style>
* {
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;
}
</style>
</head>
<body>
<ul class="new-list">
<li>
<img src="news1.jpg" alt="News 1">
<div class="news-dec">
<h3>News 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc id aliquam lacinia, nisl nunc tincidunt urna, id lacinia nunc nunc id lectus.</p>
</div>
</li>
<li>
<img src="news2.jpg" alt="News 2">
<div class="news-dec">
<h3>News 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc id aliquam lacinia, nisl nunc tincidunt urna, id lacinia nunc nunc id lectus.</p>
</div>
</li>
<li>
<img src="news3.jpg" alt="News 3">
<div class="news-dec">
<h3>News 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc id aliquam lacinia, nisl nunc tincidunt urna, id lacinia nunc nunc id lectus.</p>
</div>
</li>
</ul>
<div class="btns">
<button class="prev">上一页</button>
<button class="next">下一页</button>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
var currentIndex = 0;
var itemsPerPage = 1;
var $list = $('.new-list li');
var totalItems = $list.length;
var totalPages = Math.ceil(totalItems / itemsPerPage);
function showPage(page) {
var startIndex = (page - 1) * itemsPerPage;
var endIndex = startIndex + itemsPerPage;
$list.hide();
$list.slice(startIndex, endIndex).show();
}
function updateButtons() {
$('.prev').prop('disabled', currentIndex === 0);
$('.next').prop('disabled', currentIndex === totalPages - 1);
}
showPage(1);
updateButtons();
$('.prev').click(function() {
if (currentIndex > 0) {
currentIndex--;
showPage(currentIndex + 1);
updateButtons();
}
});
$('.next').click(function() {
if (currentIndex < totalPages - 1) {
currentIndex++;
showPage(currentIndex + 1);
updateButtons();
}
});
});
</script>
</body>
</html>
```
此示例使用jQuery创建了一个新闻列表,每页显示一个新闻项。通过点击上一页和下一页按钮,可以切换显示的新闻项。CSS样式定义了列表项的样式,包括图片、标题和描述。JavaScript代码处理分页逻辑,并更新按钮的状态。