用html css js做一个主页面,顶部为导航栏,导航栏从左往右分别是首页,关于文旅,新闻动态,文旅成都,党群工作,文旅功略的超链接,导航栏下面是每隔三秒换一次图片的轮播图
时间: 2024-03-31 08:38:17 浏览: 12
好的,这个问题很具体,我可以为您提供一个简单的示例代码,帮助您实现这个主页面。以下是示例代码:
HTML:
```
<!DOCTYPE html>
<html>
<head>
<title>主页面</title>
<link rel="stylesheet" type="text/css" 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>
<li><a href="#">党群工作</a></li>
<li><a href="#">文旅功略</a></li>
</ul>
</nav>
</header>
<section>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="image1.jpg">
</div>
<div class="mySlides fade">
<img src="image2.jpg">
</div>
<div class="mySlides fade">
<img src="image3.jpg">
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
```
CSS:
```
header {
background-color: #333;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav li {
float: left;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav li a:hover {
background-color: #ddd;
color: black;
}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
.mySlides {
display: none;
}
.mySlides img {
width: 100%;
height: auto;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
```
JS:
```
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 3000);
}
```
以上代码实现了一个简单的主页面,包括顶部的导航栏和轮播图。您可以根据自己的需求进行修改和扩展。