Greetings everyone, I am currently working on creating an endless loop slideshow of images for my website. Despite researching several resources, I am still struggling to get the code right. The issue I am facing is that only the image set in the HTML code is displaying, without any changes in the image. Could someone kindly point out what I might be doing wrong? Below are the sections of code related to the slideshow:
Javascript:
var imageArray = ["media/Chicken Itza.jpg", "media/Christ the Redeemer.jpg", "media/Colosseum.jpg", "media/Great Wall of China.jpg", "media/Machu Picchu.jpg", "media/Petra.jpg", "media/TajMahal.jpeg"];
var imageIndex = 0;
var mainImage = document.getElementById('mainImage');
mainImage.src = imageArray[0];
function slideshow() {
mainImage.innerHTML = imageArray[imageIndex];
imageIndex = imageIndex++;
if (imageIndex > imageArray.length - 1) {
imageIndex = 0;
}
}
HTML:
<body onload="slideshow()">
<img id="mainImage" class="mainslides animate-fading" src="media/Chicken Itza.jpg">
</body>
Complete HTML code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author(s)" content="Nathan, Jacob, Tee Kiat">
<meta name="description" content="FED project by Nathan, Jacob, and Tee Kiat">
<title>FED assignment (7 wonders of the world)</title>
<link rel="stylesheet" href="7 wonders.css">
<script src="index.js"></script>
</head>
<body onload="slideshow()">
<div id="hmenu" class="hamburger_menu">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">x</a>
<a href="javascript:void(0)" id="main_gwow">The 7 wonders of the world<br>=====================</a>
<a href="#" id="gwow1">Great Wall of China</a><br><!--China-->
<a href="#" id="gwow2">Petra</a><br><!--Jordan-->
<a href="#" id="gwow3">Christ the Redeemer</a><br><!--Brazil-->
<a href="#" id="gwow4">Machu Picchu</a><br><!--Peru-->
<a href="#" id="gwow5">Chicken Itza</a><br><!--Mexico-->
<a href="#" id="gwow6">Colosseum</a><br><!--Italy-->
<a href="#" id="gwow7">Taj Mahal</a><!--India-->
</div>
<span id="hamspan" style="font-size:30px;cursor:pointer;" onclick="openNav()">☰</span>
<h1 id="title">The 7 wonders of the World</h1><br>
<section id="generalimg">
<img id="mainImage" class="mainslides animate-fading" src="media/Chicken Itza.jpg">
</section>
</body>
</html>
Javascript:
var imageArray = ["media/Chicken Itza.jpg", "media/Christ the Redeemer.jpg", "media/Colosseum.jpg", "media/Great Wall of China.jpg", "media/Machu Picchu.jpg", "media/Petra.jpg", "media/TajMahal.jpeg"];
var imageIndex = 0;
var mainImage = document.getElementById('mainImage');
mainImage.src = imageArray[0];
function slideshow() {
mainImage.innerHTML = imageArray[imageIndex];
imageIndex = imageIndex++;
if (imageIndex > imageArray.length - 1) {
imageIndex = 0;
}
setTimeout(slideshow, 2000);
}
function openNav() {
document.getElementById("hmenu").style.width = "250px";
}
function closeNav() {
document.getElementById("hmenu").style.width = "0";
}
CSS:
body {
font-family: "Lato", sans-serif;
}
.mainslides {
width: 450px;
height: 500px;
}
.animate-fading {
animation: fading 5s infinite;
}
@keyframes fading {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
}
figcaption {
font-style: italic;
}
/*DO NOT TOUCH*/
h1, #hmenu, section {
text-align: center;
}
.hamburger_menu {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.hamburger_menu a {
padding-top: 5px;
text-decoration: none;
font-size: 15px;
color: #818181;
display: block;
transition: 0.3s;
}
#gwow1:hover, #gwow2:hover, #gwow3:hover, #gwow4:hover, #gwow5:hover, #gwow6:hover, #gwow7:hover, #main_gwow {
color: #f1f1f1;
}
.hamburger_menu .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 100px;
}
@media screen and (max-height: 450px) {
.hamburger_menu {
padding-top: 15px;
}
.hamburger_menu a {
font-size: 18px;
}
}
#hamspan {
float: left;
}