效果图:
代码如下,图片文件可自行更换:文章来源地址https://www.toymoban.com/news/detail-504054.html
<!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>
文章来源:https://www.toymoban.com/news/detail-504054.html
到了这里,关于写一个简单的静态html页面demo,包含幻灯片的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!