用前端代码写一个首页界面,页面顶端有一个四个选项的导航栏,文字内容分别为:知识小百科、农业新政策、购物车、我的。导航栏下正中有一个图框,可以通过点击左右两侧的肩头切换图片
时间: 2024-02-01 08:12:40 浏览: 17
以下是一个简单的实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>首页</title>
<style type="text/css">
/* 导航栏样式 */
nav {
display: flex;
justify-content: space-around;
align-items: center;
background-color: #333;
color: white;
height: 50px;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
}
nav a {
color: white;
text-decoration: none;
}
/* 图片展示区域样式 */
.image-box {
display: flex;
justify-content: center;
align-items: center;
height: 500px;
background-color: #eee;
position: relative;
}
.image-box img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.carousel {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.carousel button {
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
font-size: 30px;
padding: 10px;
cursor: pointer;
}
.carousel button:hover {
background-color: rgba(0, 0, 0, 0.8);
}
</style>
</head>
<body>
<nav>
<a href="#">知识小百科</a>
<a href="#">农业新政策</a>
<a href="#">购物车</a>
<a href="#">我的</a>
</nav>
<div class="image-box">
<div class="carousel">
<button id="prev"><</button>
<img id="image" src="https://picsum.photos/500/500?random=1" alt="随机图片">
<button id="next">></button>
</div>
</div>
<script type="text/javascript">
// 图片数组
var images = [
"https://picsum.photos/500/500?random=1",
"https://picsum.photos/500/500?random=2",
"https://picsum.photos/500/500?random=3",
"https://picsum.photos/500/500?random=4"
];
var currentIndex = 0; // 当前显示的图片索引
// 切换到上一张图片
document.getElementById("prev").addEventListener("click", function() {
currentIndex--;
if (currentIndex < 0) {
currentIndex = images.length - 1;
}
document.getElementById("image").src = images[currentIndex];
});
// 切换到下一张图片
document.getElementById("next").addEventListener("click", function() {
currentIndex++;
if (currentIndex >= images.length) {
currentIndex = 0;
}
document.getElementById("image").src = images[currentIndex];
});
</script>
</body>
</html>
```
这个页面包含了一个导航栏和一个图片展示区域,图片展示区域中有一个可左右切换的图片框,初始状态下展示的是图片数组中的第一张图片。你可以根据需要修改样式和图片数组。