我基本上刚刚接触 html、css 和 js。我有一个问题已经困扰了我两天了...... 幻灯片遮盖了第一个分隔线，它不在应有的位置。在第一个分隔线下。
所以我真的迷失了这里。我确信这不是一个很好的代码。因此，如果有一些建议可以使其更加紧凑，我很乐意获得帮助。
var currentSlide = 0;
var slides = document.querySelectorAll('#slideshow-container img');
function showSlide(index) {
slides.forEach(function(slide) {
slide.classList.remove('active');
});
slides[index].classList.add('active');
}
function nextSlide() {
currentSlide = (currentSlide + 1) % slides.length;
showSlide(currentSlide);
}
setInterval(nextSlide, 3000); // Wechselt alle 3 Sekunden
showSlide(currentSlide);
function toggleMenu() {
var navList = document.querySelector('.nav-list');
navList.classList.toggle('active');
var bars = document.querySelectorAll('.bar');
bars.forEach(bar => bar.classList.toggle('change'));
}body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: larger;
margin: 0;
padding: 0;
box-sizing: border-box;
}
#banner {
width: 100%;
display: block;
align-items: center;
max-height: 420px;
background-color: #cc234c;
object-fit: cover;
}
.navbar {
background-color: rgba(248, 245, 245, 0.7);
padding: 10px;
align-items: center;
position: absolute;
z-index: 2;
width: 100%;
letter-spacing: 5px;
}
.nav-list {
list-style-type: none;
margin: 0;
padding: 5px 25px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: all 2s ease;
/* Add transition for smooth animation */
max-height: 0;
overflow: hidden;
}
.nav-list.active {
max-height: 150px;
/* Adjust the max-height based on your content */
}
.nav-list li {
margin-bottom: 0px;
}
.nav-list a {
text-decoration: none;
color: #cc234c;
display: block;
text-transform: uppercase;
transition: color 0.3s ease;
padding-left: 50px;
transition: text-decoration 5s ease;
margin-right: 40px;
}
.nav-list a:hover {
text-decoration: overline underline;
}
.menu-toggle {
cursor: pointer;
}
.bar {
width: 25px;
height: 3px;
background-color: #cc234c;
margin: 5px 0;
align-items: center;
transition: transform 0.5s ease;
}
.bar.change:nth-child(1) {
transform: rotate(-45deg) translate(-5px, 6px);
}
.bar.change:nth-child(2) {
opacity: 0;
}
.bar.change:nth-child(3) {
transform: rotate(45deg) translate(-5px, -6px);
}
@media screen and (min-width: 769px) {
.nav-list {
display: flex !important;
max-height: none !important;
flex-direction: row;
}
.nav-list li {
margin-right: 20px;
margin-bottom: 0;
}
.menu-toggle {
display: none;
}
}
.current {
text-decoration: underline;
color: #cc234c;
}
<!--slideshow-->#slideshow-container {
text-align: center;
align-items: center;
margin: auto;
overflow: hidden;
border: 2px solid #000;
align-items: center;
padding: 0px;
}
#slideshow-container img {
width: 100%;
align-items: center;
object-fit: cover;
height: 500px;
display: inline-block;
transition: opacity 1s ease-in-out;
opacity: 0;
position: absolute;
left: 0px;
top: 0;
}
#slideshow-container img.active {
opacity: 1;
/* Set the opacity to 1 for the active (visible) image */
}```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Deine Webseite</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<!-- Banner -->
<img id="banner" src="images/gesundeSchuhe.jpg" alt="Banner">
<!-- Navbar -->
<div class="navbar">
<div class="menu-toggle" onclick="toggleMenu()">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<ul class="nav-list">
<li class="current"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- Slideshow -->
<div id="slideshow-container">
<!-- Füge hier deine Slideshow-Bilder ein -->
<img src="images/test1.jpeg" alt="Slide 1">
<img src="images/test2.jpeg" alt="Slide 2">
<img src="images/test3.jpeg" alt="Slide 3">
</div>
<script src="script.js">
</script>
</body>
</html>我无意冒犯，但有点难以知道你的问题是什么。我得到的是你想要一个横幅，顶部的图像，在那里说。然后，导航栏随之而来。最后是幻灯片。您的代码当前正在将幻灯片（应该是第三个元素）放在其他元素之上。
首先，您将容器设置为没有宽度或高度，因此它是不可见的。然而，容器上注明了预期的情况。儿童图像使用
position: absolutetop: 0因此，只需从 CSS 中的
top: 0#slideshow-container img {}