I am making an website which has menu and image slides. But when I add javascript for animation, everything above the images are dead. How to fix that? HTML code:
<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>
Now to the javascript part:
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);
}
The css files:(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;
}
Everything is alive if I remove the javascript part. Is it due to the body onload? Thanks in advance.
