请写出大作业 :个人博客网站 要求:包含 导航栏, 轮播图, footer 三部分,其他部分自定 实现轮播图 标签按钮的翻页功能 (使用data属性或者jquery语句)的代码
时间: 2024-03-06 07:50:23 浏览: 23
好的!这里是一个简单的示例代码,实现了个人博客网站的要求,包含了导航栏、轮播图和 footer 三部分,并实现了轮播图标签按钮的翻页功能。请注意,这只是一个示例,你可以根据自己的需求进行修改和扩展。
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>个人博客网站</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">分类</a></li>
<li><a href="#">标签</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
</header>
<main>
<div class="carousel">
<img src="https://picsum.photos/800/400?random=1" data-index="1">
<img src="https://picsum.photos/800/400?random=2" data-index="2">
<img src="https://picsum.photos/800/400?random=3" data-index="3">
<img src="https://picsum.photos/800/400?random=4" data-index="4">
<img src="https://picsum.photos/800/400?random=5" data-index="5">
<div class="carousel-buttons">
<button data-index="1" class="active"></button>
<button data-index="2"></button>
<button data-index="3"></button>
<button data-index="4"></button>
<button data-index="5"></button>
</div>
</div>
<section>
<h2>博客文章列表</h2>
<ul>
<li><a href="#">文章标题1</a></li>
<li><a href="#">文章标题2</a></li>
<li><a href="#">文章标题3</a></li>
<li><a href="#">文章标题4</a></li>
<li><a href="#">文章标题5</a></li>
</ul>
</section>
</main>
<footer>
<p>版权所有 © 2021</p>
</footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>
```
CSS 代码:
```css
body {
font-family: Arial, sans-serif;
margin: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
color: #fff;
text-decoration: none;
padding: 10px;
}
main {
max-width: 800px;
margin: 0 auto;
}
.carousel {
position: relative;
height: 400px;
overflow: hidden;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.carousel img.active {
opacity: 1;
}
.carousel-buttons {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
margin-bottom: 20px;
}
.carousel-buttons button {
background-color: #ccc;
border: none;
width: 10px;
height: 10px;
border-radius: 50%;
margin: 0 10px;
}
.carousel-buttons button.active {
background-color: #333;
}
section {
margin-top: 50px;
}
section h2 {
font-size: 24px;
margin-bottom: 20px;
}
section ul {
list-style: none;
margin: 0;
padding: 0;
}
section li {
margin-bottom: 10px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
```
JavaScript 代码:
```javascript
$(function() {
// 初始化轮播图和按钮
var $carousel = $('.carousel');
var $images = $carousel.find('img');
var $buttons = $carousel.find('.carousel-buttons button');
var currentIndex = 0;
$images.eq(0).addClass('active');
$buttons.eq(0).addClass('active');
// 标签按钮点击事件
$buttons.click(function() {
var index = $(this).data('index') - 1;
if (index !== currentIndex) {
// 切换图片和按钮
$images.eq(currentIndex).removeClass('active');
$buttons.eq(currentIndex).removeClass('active');
$images.eq(index).addClass('active');
$buttons.eq(index).addClass('active');
currentIndex = index;
}
});
});
```
希望这份示例代码对你有所帮助!如果你有任何问题,请随时向我提问。