I have three images in my HTML code, and I want them to change every five seconds. Why does my code not work?
var images = [];
images[0] = ['photoFromInternet'];
images[1] = ['photoFromInternet2'];
images[2] = ['photoFromInternet3'];
var index = 0;
function change() {
document.mainPhoto.src = images[index];
if (index == 2) {
index = 0;
} else {
index++;
}
setInterval(change(), 1000);
}
window.onload = change();
<div class="lastMain">
<a href="www.comingsoon.com" id="slider">
<img id="mainPhoto">
<div class="mainSlider">
<img src="photoFromInternet1" style="display: none">
<img src="photoFromInternet2*" style="display: none">
<img src="photoFromInternet3" style="display: none">
</div>
</a>
</div>
P.S. If you can help please don't use jquery because I haven't learned that yet.