我正在制作一个包含菜单和图片幻灯片的网站。但是当我为动画添加 javascript 时，图像上方的所有内容都死了。如何解决？ HTML代码:
<head>
<title>Water Solutions</title>
<link rel="stylesheet" href="CSS/common.css">
<link rel="stylesheet" href="CSS/index.css">
<script src="JS/index.js"></script>
</head>
<body onload="showSlides()">
<div class = "navbar">
<div id = "Header">
<div class="logo">
<a href="#"><img src="Images/onlinelogomaker-122816-1814-1991.png"></a>
</div>
<nav id = "Menu">
<ul id = "Menu-Items">
<li class="Item"><a href="index.html">HOME</a></li>
</ul>
</nav>
</div>
</div>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="Images/Image1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="Images/Image2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="Images/Image3.jpg" style="width:100%">
</div>
</div><br>
</body>
现在是 javascript 部分:
var slideIndex = 0;
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=0;
}
slides[slideIndex].style.display = "block";
setTimeout(showSlides, 5000);
}
css文件:(index.css)
.mySlides{
display: none;
}
.slideshow-container {
position: relative;
margin: 40px 0;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
common.css:
body{
font-family: Arial, Helvetica, sans-serif;
}
.Header{
width: 100%;
text-align: center;
vertical-align: bottom;
display: inline-block;
line-height: 120px;
height: 120px;
}
#Menu-Items{
float: right;
margin-top: 60px;
}
#Menu-Items li{
display: inline-block;
font-size: 1em;
margin: 20px 10px ;
vertical-align: bottom;
line-height: normal;
}
.logo{
position: absolute;
left: 10px;
top: 10px;
margin: 0px 15px 15px 0;
}
a{
text-decoration: none;
color: black;
}
a:active{
color: deepskyblue;
}
a:hover{
color: deepskyblue;
}
input[type=text] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
如果我删除 javascript 部分，一切都还活着。是因为 body onload 吗？提前致谢。
最佳答案
您在菜单中未清除的 float 导致了这个问题。用 clearfix 清除它应该可以解决这个问题。
#Menu:after {
content:'';
clear: both;
display: table;
}
使用 clear: both 添加一个 伪元素 让文档流识别您的 #Menu 的高度并正确呈现以下元素在导航之后而不是在导航之上。
关于javascript - 添加javascript后，我网页中的所有链接都失效了，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41375434/