写一个简单的静态html页面demo，包含幻灯片
<!DOCTYPE html>
<html>
<head>
<title>公司网站</title>
<style>
/* 样式定义 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
nav {
background-color: #555;
color: #fff;
padding: 10px;
text-align: center;
}
nav a {
color: #fff;
text-decoration: none;
margin-right: 10px;
}
.content {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
/* 动态效果 */
nav a:hover {
color: #ff0000;
}
.slideshow {
width: 60%;
height: 300px;
overflow: hidden;
position: relative;
margin: 0 auto; /* 剧中 */
}
.slide {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.5s ease;
}
.slide.active {
opacity: 1;
}
</style>
<script>
// 动态幻灯片
document.addEventListener(DOMContentLoaded, function() {
const slides = document.querySelectorAll(.slide);
let currentSlideIndex = 0;
function showNextSlide() {
slides[currentSlideIndex].classList.remove(active);
currentSlideIndex = (currentSlideIndex + 1) % slides.length;
slides[currentSlideIndex].classList.add(active);
}
setInterval(showNextSlide, 3000);
});
</script>
</head>
<body>
<header>
<h1>公司名称</h1>
</header>
<nav>
<a href="#">首页</a>
<a href="#">关于我们</a>
<a href="#">业务介绍</a>
<a href="#">联系方式</a>
</nav>
<div class="slideshow">
<img class="slide active" src="./image/image1.png" alt="Slide 1">
<img class="slide" src="./image/image2.png" alt="Slide 2">
<img class="slide" src="./image/image3.png" alt="Slide 3">
</div>
<div class="content">
<h2>公司介绍</h2>
<p>这里是公司介绍的内容。</p>
<h2>主要业务介绍</h2>
<p>这里是主要业务介绍的内容。</p>
<h2>联系方式</h2>
<p>这里是联系方式的内容。</p>
</div>
<footer>
© 2023 公司名称. All rights reserved.
</footer>
</body>
</html>
下一篇：
axios拦截器阻止发送请求